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 -> 父组件 -> 子组件

无特定关系组件

设置全局广播事件