首页 > 代码库 > React组件间的通信
React组件间的通信
1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；
2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用；
子组件调用父组件
- 创建一个简单组件ButtonComment，调用此组件是需传递参数buttonName，并创建初始化方法getInitialState及点击事件sendSword ：
var ButtonComment = React.createClass({ getInitialState: function () { return {count:0}; }, //点击发宝刀。。。 sendSword: function () { var newCount = this.state.count + 1; this.setState({ count:newCount }); //通过props调用父组件的方法 this.props.getSwordCount(newCount ); }, render: function () { return ( <button onClick={this.sendSword}>{this.props.buttonName}</button> ); } });
点击按钮，将会调用sendWord方法，更改count的状态，并调用父组件的方法getSwordCount，这时将会重新渲染页面，如果不想重新渲染请重写方法shouldComponentUpdate: function (nextProps,nextState){}并返回false即可。
- 创建一个父组件ImDaddyComponent，并将属性buttonName及方法getSwordCount传递给子组件ButtonComment：
var ImDaddyComponent = React.createClass({ getInitialState: function () { return {sendCount:0}; }, getSwordCount: function (newCount) { this.setState({sendCount:newCount}); }, render: function () { return ( <div> <ButtonComment getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/> <p> 父子俩共送{this.state.sendCount}把宝刀！！！ </p> </div> ); } });
- 进行页面的渲染，点击”儿子送宝刀”按钮时，将会计算送宝刀数量，并通过this.props.getSwordCount(newCount );传递给父组件，更改state属性值。
React.render( <ImDaddyComponent />, document.getElementById(‘index-0331-0011‘));
以上就完成了子组件调用父组件的属性及方法。
父组件调用子组件
- 要调用子组件的方法或者属性，需要在调用子组件的时候定义ref属性，且唯一，更新ImDaddyComponent 如下：
var ImDaddyComponent = React.createClass({ getInitialState: function () { return {sendCount:0}; }, //通过refs方式调用子组件的方法sendSword sendSword: function () { this.refs.getSwordButton.sendSword(); }, getSwordCount: function () { //通过refs方式调用子组件的属性count this.setState({sendCount:this.refs.getSwordButton.state.count + 1}); }, render: function () { return ( <div> //此处需要定义ref属性，且值唯一 <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/> <button onClick={this.sendSword}>通过老爸送宝刀</button> <p> 父子俩共送{this.state.sendCount}把宝刀！！！ </p> </div> ); } });
以上，就完成父组件调用子组件。
完整代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://www.mamicode.com/dist/react/react.js"></script> <script src="http://www.mamicode.com/dist/react/JSXTransformer.js"></script> <script src="http://www.mamicode.com/dist/jquery/jquery.min.js"></script> <!--如下的这种引用方式是不正确的，必须使用上面的引用方式--> <!--<script src="http://www.mamicode.com/dist/react/JSXTransformer.js"/>--></head><body><div id="index-0331-0011"></div><script type="text/jsx"> var ButtonComment = React.createClass({ getInitialState: function () { return {count:0}; }, sendSword: function () { var newCount = this.state.count + 1; this.setState({count:this.state.count + 1}); this.props.getSwordCount(); }, render: function () { return ( <button onClick={this.sendSword}>{this.props.buttonName}</button> ); } }); var ImDaddyComponent = React.createClass({ getInitialState: function () { return {sendCount:0}; }, sendSword: function () { this.refs.getSwordButton.sendSword(); }, getSwordCount: function () { this.setState({sendCount:this.refs.getSwordButton.state.count + 1}); }, render: function () { return ( <div> <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/> <button onClick={this.sendSword}>通过老爸送宝刀</button> <p> 父子俩共送{this.state.sendCount}把宝刀！！！ </p> </div> ); } }); React.render( <ImDaddyComponent />, document.getElementById(‘index-0331-0011‘) );</script></body></html>
React组件间的通信
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。