React组件间的通信
2017-03-14 10:13
302 查看
1、子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用;
2、父组件调用子组件,采用refs的方式进行调用,需要父组件在调用子组件的时候,添加ref属性,并进行唯一命名,在父组件中即可调用;
点击按钮,将会调用sendWord方法,更改count的状态,并调用父组件的方法getSwordCount,这时将会重新渲染页面,如果不想重新渲染请重写方法shouldComponentUpdate: function (nextProps,nextState){}并返回false即可。
创建一个父组件ImDaddyComponent,并将属性buttonName及方法getSwordCount传递给子组件ButtonComment:
进行页面的渲染,点击”儿子送宝刀”按钮时,将会计算送宝刀数量,并通过this.props.getSwordCount(newCount );传递给父组件,更改state属性值。
以上就完成了子组件调用父组件的属性及方法。
以上,就完成父组件调用子组件。
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="../../dist/react/react.js"></script>
<script src="../../dist/react/JSXTransformer.js"></script>
<script src="../../dist/jquery/jquery.min.js"></script>
<!--如下的这种引用方式是不正确的,必须使用上面的引用方式-->
<!--<script src="../../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组件间通信
- 详解React中的组件通信问题
- react 父子组件之间的通信和函数调用
- react组件之间的通信
- 关于React的父子组件通信等等
- ReactJS组件之间通信
- React组件通信技巧
- React 各种组件关系通信
- 【React源码分析】组件通信、refs、key和ReactDOM
- react native组件通信以及
- react没有嵌套关系的组件之间通信方法详解
- React组件之间的通信
- [转] React 中组件间通信的几种方式
- React-Native学习十九:组件之间的通信-1
- React中父子组件间的通信问题
- React中父子组件间的通信问题
- React组件之间的通信
- React-Native学习十九:组件之间的通信-1
- react-native 与 native组件之间的通信
- react 组件通信