这次给大家带来React中组件通信使用详解，React中组件通信使用的注意事项有哪些，下面就是实战案例，一起来看一下。
组件通信
在这里只讲 React 组件与组件本身的通信，组件通信主要分为三个部分：
父组件向子组件通信：父组件向子组件传参或者是父组件调用子组件的方法
子组件向父组件通信：子组件向父组件传参或者是子组件调用父组件的方法
兄弟组件通信：兄弟组件之间相互传参或调用
建议不要有太深的的嵌套关系
父组件向子组件通信
父：调用子组件的方法主要使用
this.refs.c1.changeChildren1父：向子组件传参主要使用
text={this.state.text}子：定义方法 changeChildren1 供父组件调用
子：使用通过属性
this.props.text获取来自父组件的传参
//父组件向子组件通信
//父组件
var ParentComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
this.setState({text: event.target.value});
//调用子组件的方法
this.refs.c1.changeChildren1(event.target.value);
},
render: function(){
return (
)
}
})
//子组件
var ChildrenComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被父组件调用执行
changeChildren1: function(text){
this.setState({text: text});
},
render: function(){
return (
子组件-来自父组件的调用：{this.state.text}
子组件-来自父组件的传参：{this.props.text}
)
}
})
ReactDOM.render( 子组件向父组件通信
父：定义方法 changeParent 供子组件调用
子：调用父组件的方法主要使用
this.props.change(event.target.value);
//子组件向父组件通信
//父组件
var ParentComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件调用执行
changeParent: function(text){
this.setState({text: text});
},
render: function(){
return (
父组件-来自子组件的调用：{this.state.text}
)
}
})
//子组件
var ChildrenComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
)
}
})
ReactDOM.render( 兄弟组件通信
方式一：通过共同的父组件通信
因为在 React 组件必须有且仅有一个最顶层元素，所以兄弟组件之间肯定会有共同的父元素（组件），所以兄弟之间的可以通过共同的父元素（组件）进行通信，通信的方式和上面介绍的父子、子父相互结合便可达到
//兄弟组间通信-通过共同的父组件通信
//父组件
var ParentComponent3 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件2调用，向子组件1通信
changeChildren1: function(text){
//调用子组件1的方法
this.refs.cp1.changeState(text);
},
//被子组件1调用，向子组件2通信
changeChildren2: function(text){
//调用子组件2的方法
this.refs.cp2.changeState(text);
},
render: function(){
return (
父组件-来自子组件的调用：{this.state.text}
来自子组件2的调用-{this.state.text}
)
}
})
//子组件2
var ChildrenComponent3_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
来自子组件1的调用-{this.state.text}
行业贸易网站管理系统 2007 Beta 1
1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修
下载
)
}
})
ReactDOM.render(方式二：通过 context 通信
和通过共同的父组件通信一样，不同之处在于调用的是 context
//兄弟组间通信-通过 context 通信
//父组件
var ParentComponent4 = React.createClass({
getChildContext: function(){
return {
changeChildren1: function(text){
this.refs.cp1.changeState(text)
}.bind(this),
changeChildren2: function(text){
this.refs.cp2.changeState(text)
}.bind(this)
}
},
childContextTypes: {
changeChildren1: React.PropTypes.func.isRequired,
changeChildren2: React.PropTypes.func.isRequired
},
render: function(){
return (
)
}
})
//子组件1
var ChildrenComponent4_1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren2: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren2(event.target.value);
},
render: function(){
return (
来自子组件2的调用-{this.state.text}
)
}
})
//子组件2
var ChildrenComponent4_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren1: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren1(event.target.value);
},
render: function(){
return (
来自子组件1的调用-{this.state.text}
)
}
});
ReactDOM.render(相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
