标签：state set 理解 turn ext res class target --
组件通信无外乎，下面这三种父子组件，子父组件，平行组件（也叫兄弟组件）间的数据传输。下面我们来分别说一下：
父子组件：
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。这两个我还没完全理解，日后再说。
标签：state set 理解 turn ext res class target --
原文地址：http://www.cnblogs.com/ztl0918/p/6920963.html
