React 的父子组件通信

通信

• 父元素传一个函数给子元素
• 子元素在恰当的时间调用这个函数

回调

爸爸组件

<RabbitTrack success={this.success1.bind(this)}/>
<TurtleTrack success={this.success2.bind(this)}/>

儿子组件

if (n === 100) {
    clearInterval(intervalId)
    this.props.success()
}

传入

爸爸组件

<Rabbit result={this.state.result1}/>
<Turtle result={this.state.result2}/>

儿子组件

<div>
    <h2>Rabbit Total Time</h2>
    <div>{props.result}</div>
</div>

爷孙组件通信

爷爷组件将函数传给爸爸，爸爸再将函数传给儿子，儿子再去调用。
爷爷组件

<Playground rabbitSuccess={this.rabbitSuccess.bind(this)} turtleSuccess={this.turtleSuccess.bind(this)}/>

爸爸组件

<div className="playground">
    <RabbitTrack success={rabbitSuccess}/>
    <TurtleTrack success={turtleSuccess}/>
</div>

儿子组件

<div className="rabbit">
    <div className="player" style={this.state.style}>Rabbit</div>
    <div className="track"/>
</div>

<div className="turtle">
    <div className="player" style={this.state.style}>Turtle</div>
    <div className="track"/>
</div>