reactjs--父组件调用子组件的内部方法

本文主要是介绍reactjs--父组件调用子组件的内部方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、引入相关js

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery.min.js"></script>

2、js部分代码

<div id="correspond"></div>

<!--js代码-->
<script type="text/babel">
    ///子组件
    var HelloMessage = React.createClass({childMethod: function(){alert("组件之间通信成功");
        },
        render: function() {return <div> <h1>Hello {this.props.name}</h1>  <button onClick={this.childMethod}>子组件</button></div>
        }});

    //父组件
    var ImDaddyComponent = React.createClass({getDS: function(){//调用组件进行通信
            this.refs.getSwordButton.childMethod();
        },
        render: function(){return (<div>
                        <HelloMessage name="John" ref="getSwordButton" />
                        <button onClick={this.getDS}>父组件</button>
                    </div>
            );
        }});

    ReactDOM.render(<ImDaddyComponent  />,
            document.getElementById('correspond'));

</script>

3、页面效果

这篇关于reactjs--父组件调用子组件的内部方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---