這次帶給大家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 (
<p>
<p><label>父组件</label><input type="text" onChange={this.change}/></p>
<ChildrenComponent1 ref="c1" text={this.state.text}/>
</p>
)
}
})
//子组件
var ChildrenComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被父组件调用执行
changeChildren1: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>子组件-来自父组件的调用：{this.state.text}</p>
<p>子组件-来自父组件的传参：{this.props.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent1/>, document.getElementById('p1'));登入後複製
子元件向父元件通訊
//子组件向父组件通信
//父组件
var ParentComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件调用执行
changeParent: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent2 change={this.changeParent}/>
</p>
)
}
})
//子组件
var ChildrenComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件</label><input type="text" onChange={this.change}/></p>
</p>
)
}
})
ReactDOM.render(<ParentComponent2/>, document.getElementById('p2'));登入後複製
兄弟元件通訊
因為在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 (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
<ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
</p>
)
}
})
//子组件1
var ChildrenComponent3_1 = 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 (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件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 (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent3/>, document.getElementById('p3'));登入後複製
方式二：透過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 (
<p>
<ChildrenComponent4_1 ref="cp1"/>
<ChildrenComponent4_2 ref="cp2"/>
</p>
)
}
})
//子组件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 (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件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 (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
});
ReactDOM.render(<ParentComponent4/>, document.getElementById('p4'));登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
PromiseA 的實作步驟詳解
#react實作選取li高亮步驟詳解
#
以上是React中元件通訊使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
