react组件间通信

处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就是你。

React 组件之间交流的方式，可以分为以下 3 种：

• [父组件] 向 [子组件] 传值（Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1）；
• [子组件] 向 [父组件] 传值（Child_1与Parent）；
• 兄弟组件之间传值（Child_1 与 Child_2、Child_1_1 与 Child_2、etc.）

组件之间关系

1.[父组件] 向 [子组件] 传值

通讯是单向的，数据必须是由一方传到另一方。在 React 中，父组件可以向子组件通过传 props 的方式，向子组件进行通讯。

var MyContainer = React.createClass({
    getInitialState:()=>{
        return {
            checked:true
        }
    },
    render(){
        return <ToggleButton text="Toggle me" checked={this.state.checked} />
    }
})

var ToggleButton = React.createClass({
    render(){
        return <div>
            <label>{this.props.text}:<input type="checkbox" checked={this.props.checked}/></label>
        </div>
    }
})

如果父组件与子组件之间不止一个层级，如 Parent 与 Child_1_1 这样的关系，可通过 ... 运算符（Object 剩余和展开属性），将父组件的信息，以更简洁的方式传递给更深层级的子组件。

var MyContainer = React.createClass({
    getInitialState:()=>{
        return {
            checked:true
        }
    },
    render(){
        return <ToggleButton text="Toggle me" checked={this.state.checked} />
    }
})

var ToggleButton = React.createClass({
    render(){
        return <div>
            <label>{this.props.text}:<input type="checkbox" checked={this.props.checked}/></label>
            <Child {...this.props}/>
        </div>
    }
});

var Child = React.createClass({
    render(){
        return <p>{this.props.text}</p>
    }
})

2.[子组件] 向 [父组件] 传值

在上一个例子中，父组件可以通过传递 props 的方式，自顶而下向子组件进行通讯。而子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。

var MyContainer = React.createClass({
    getInitialState:()=>{
        return {
            checked:false
        }
    },
    onChildChange(newState){
        this.setState({checked:newState})
    },
    render(){
        var isChecked = this.state.checked ? 'yes' : 'no'
        return <div>
            <h4>Are yao checked:{isChecked}</h4>
            <ToggleButton text="Toggle me" initialChecked={this.state.checked} callbackParent={this.onChildChange}/>
        </div>
    }
})

var ToggleButton = React.createClass({
    getInitialState(){
      return {
          checked:this.props.initialChecked
      }
    },
    onTextChange(){
      var newState = !this.state.checked;
        this.setState({checked:newState});
        this.props.callbackParent(newState);
    },
    render(){
        return <div>
            <label>{this.props.text}:<input type="checkbox" checked={this.state.checked} onChange={this.onTextChange}/></label>
        </div>
    }
});

可以用如下的流程图和形象的描述上述的传递过程：

3.兄弟组件之间传值

对于没有直接关联关系的两个节点，就如 Child_1 与 Child_2 之间的关系，他们唯一的关联点，就是拥有相同的父组件。如果我们由 Child_1 向 Child_2 进行通讯，我们可以先通过 Child_1 向 Parent 组件进行通讯，再由 Parent 向 Child_2 组件进行通讯，所以有以下代码。

var Parent = React.createClass({
    getInitialState(){
        return {
            msg:"start"
        }
    },

    transferMsg(msg){
        this.setState({msg:msg})
    },
    render(){
        return <div>
            <Child_1 transferMsg={msg=>this.transferMsg(msg)}/>
            <Child_2 msg={this.state.msg}/>
        </div>
    }
})

var  Child_1 = React.createClass({
    componentDidMount() {
        setTimeout(() => {
            this.props.transferMsg('end')
        }, 1000);
    },

    render() {
        return <div>
            <p>child_1 component</p>
        </div>
    }
})

var Child_2 = React.createClass({
    render() {
        return <div>
            <p>child_2 component: {this.props.msg}</p>
        </div>
    }
})

所有DEMO的地址：https://github.com/react-redux-demo/react-component-communication