React组件之间传值

React 的组件通信可分为以下三种情况

1. 父级组件 -> 子集组件
2. 子集组件 -> 父级组件
3. 兄弟组件（同级组件）

4. 无特定关系组件

   一 、 父级组件 -> 子集组件

 var ChildComponent = React.createClass({            getInitialState:function(){                return {                    show:true                }            },            render:function(){                console.log(this.props.title)                var st=this.props.shows;                var show=st?'showClass':'hideClass';                return (                    <div>                        <span>{this.state.show}</span>                        <div className={show}></div>                    </div>                )            }        });        var ParentComponent = React.createClass({            getInitialState:function(){                return {                    parentcomponet:true                }            },            statusHandler:function(){                this.setState({parentcomponet:!this.state.parentcomponet})            },            render:function(){                return (                    <div>                        <ChildComponent title="gg" shows={this.state.parentcomponet}></ChildComponent>                        <button onClick={this.statusHandler}>点击</button>                    </div>                )            }        });        ReactDOM.render(        <ParentComponent></ParentComponent>        ,        document.getElementById('app')        );

如上父级组件向子集通信 通常使用 props

有一个明显的缺陷，当组件层级较深时，props 的传递成本就明显较高，不建议react 的层级过多（尽量减少层级，或者控制组件层级在一定范围内）

###二 、 子集组件 -> 父级组件
“`
var ParentComponent = React.createClass({
getInitialState: function () {
return {
checked: false,
parent:’0’
};
},
onChildChanged: function (newState) {
this.setState({
checked: newState
});
console.log(this.state);
},
render: function() {
var isChecked = this.state.checked ? ‘yes’ : ‘no’;
return (

Are you checked: {isChecked}

兄弟组件（同级组件）

其实很简单 把上两种数据传递结合起来就是第三种
组件之间是相互独立的
基本数据流 是
子组件1 -> 父组件 -> 子组件

无特定关系组件

设置全局广播事件