首页 > 代码库 > React之组件通信
React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输。下面我们来分别说一下:
父子组件:
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之组件通信
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。