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 (
            <div>
                <p><label>父組件</label><input type="text" onChange={this.change}/></p>
                <ChildrenComponent1 ref="c1" text={this.state.text}/>
            </div>                        
        )
    }
}) 

//子組件
var ChildrenComponent1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被父組件調用執行
    changeChildren1: function(text){
        this.setState({text: text});
    },
    render: function(){
        return (
            <div>
                <p>子組件-來自父組件的調用：{this.state.text}</p>
                <p>子組件-來自父組件的傳參：{this.props.text}</p>
            </div>                        
        )
    }
})  
ReactDOM.render(<ParentComponent1/>, document.getElementById('div1'));

子組件向父組件通訊

• 父：定義方法 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 (
            <div>
                <p>父組件-來自子組件的調用：{this.state.text}</p>                     
                <ChildrenComponent2 change={this.changeParent}/>
            </div>                        
        )
    }
}) 

//子組件
var ChildrenComponent2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //輸入事件
    change: function(event){
        //調用子組件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <div>
                <p><label>子組件</label><input type="text" onChange={this.change}/></p>
            </div>                        
        )
    }
})  
ReactDOM.render(<ParentComponent2/>, document.getElementById('div2'));

兄弟組件通訊

• 方式一：經過共同的父組件通訊

由於在 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 (
            <div>
                <p>父組件-來自子組件的調用：{this.state.text}</p>                     
                <ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
                <ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
            </div>                        
        )
    }
}) 

//子組件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 (
            <div>
                <p><label>子組件1</label><input type="text" onChange={this.change}/></p>
                <p>來自子組件2的調用-{this.state.text}</p>
            </div>                        
        )
    }
})  
//子組件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 (
            <div>
                <p><label>子組件2</label><input type="text" onChange={this.change}/></p>
                <p>來自子組件1的調用-{this.state.text}</p>
            </div>                        
        )
    }
})              
ReactDOM.render(<ParentComponent3/>, document.getElementById('div3'));

方式二：經過 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 (
            <div>
                <ChildrenComponent4_1 ref="cp1"/>
                <ChildrenComponent4_2 ref="cp2"/>
            </div>                        
        )                    
    }
}) 

//子組件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 (
            <div>
                <p><label>子組件1</label><input type="text" onChange={this.change}/></p>
                <p>來自子組件2的調用-{this.state.text}</p>
            </div>                        
        )
    }
})  
//子組件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 (
            <div>
                <p><label>子組件2</label><input type="text" onChange={this.change}/></p>
                <p>來自子組件1的調用-{this.state.text}</p>
            </div>                        
        )
    }
});                
ReactDOM.render(<ParentComponent4/>, document.getElementById('div4'));

效果預覽