組件通信無外乎，下面這三種父子組件，子父組件，平行組件（也叫兄弟組件）間的數據傳輸。下面我們來分別說一下：

父子組件：

var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:‘‘
        }
    },
    tap:function(e){
        var str=e.target.value;
        this.setState({res:str})
    },
    render:function(){
        
 
return(
            <div>
                <h1>父組件</h1>
                <input type="text" onChange={this.tap}/>
                <Child name={this.state.res}/>
            </div>
        )
    }
})
var Child=React.createClass({
    render:function(){
        console.log(
 
this.props)
        return(
            <div>
                <h1>子組件</h1>
                <p>{this.props.name}</p>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))

這裏我們通過設置默認狀態，添加onchange事件，並把狀態以默認屬性的形式給子組件，然後通過this.props來獲取。

說完了父子組件，那麽子組件如何傳遞到父組件呢？

<script type="text/babel">
        var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:‘‘
        }
    },
    render:function(){
        var _this=this;
        return(
            <div>
                <h1>父組件</h1>
                <p>{this.state.res}</p>
                <Child name={function(s){
                    _this.setState({res:s})
                }}/>
            </div>
        )
    }
})
var Child=React.createClass({
    tap:function(e){
        var str=e.target.value;
        console.log(str)
//        this.props.name==function
//        this.props.name(a)==function(s)
//        a==s
        this.props.name(str)
//        str==s
    },
    render:function(){
        console.log(this.props)
        return(
            <div>
                <h1>子組件</h1>
                <input type="text" onChange={this.tap}/>    
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))
    </script>

【子組件】控制自己的 state 然後告訴【父組件】的點擊狀態，然後在【父組件】中展示出來。

----------------------------------------------------------------------------------------------------------------------------------------------------

同級組件間的通訊復雜點，不過這裏可以說點思路，假如這兩個組件擁有相同的父組件可以將父組件作為橋梁，一個組件先傳遞給父組件，然後父組件再傳遞給兄弟組件。

另外還可以使用觀察著模式，還有redux。這兩個我還沒完全理解，日後再說。

React之組件通信