React父子事件傳遞方式
阿新 • • 發佈:2018-11-14
實現父子元件雙向資料傳遞:
1,(父 ---> 子)父元件可以向子元件傳遞props,props中帶有初始化子元件的資料,還有回撥函式。
2,(子 ---> 父)子元件通過呼叫父元件傳遞到子元件的方法向父元件傳遞資料。
PS:更改props值是不能觸發重新渲染的,只有呼叫setState才會觸發控制元件的重新渲染,所以要實現React的父子元件之間的通訊,需要同時結合props與state來完成,eact是單向資料流,父元件可以向子元件傳遞props。
var Parent = React.createClass({ getInitialState: function() { return { name: this.props.name } }, onChangeName: function(name) { this.setState({name: name}) }, render: function() { return <div onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> Hello  <Child name={this.state.name} onChangeName={this.onChangeName}> </Child> , welcome. </div>; }, onMouseOver: function() { this.setState({ name: "Emily" }); }, onMouseOut: function() { this.setState({ name: "Grace" }); } }); var Child = React.createClass({ render: function() { return <span onClick={this.handleClick}>{this.props.name}</span>; }, handleClick: function() { this.props.onChangeName("Chris"); } }); ReactDOM.render( <Parent name='Anna' />, document.getElementById('example') );