以龟兔赛跑为例，做一个组件之间 - 父子/爷孙的通信。
不需用到内部状态的组件就用 function，
需记录内部状态的组件就用 class。
父子之间的通信：
class App extends React.Component {
constructor(props){
super()
this.state = {
result1: 0,
result2: 0
}
this.t0 = new Date()
}
success1(x){
console.log(x)
let r1 = new Date() - this.t0
this.setState({
result1: r1
})
}
success2(x){
console.log(x)
let r2 = new Date() - this.t0
this.setState({
result2: r2
})
}
render(){
return(
<div>
<div className="header">
<Time1 result={this.state.result1} />
<Time2 result={this.state.result2} />
</div>
<Track1 success={this.success1.bind(this)} />
<Track2 success={this.success2.bind(this)} />
</div>
)
}
}
App 是父，Track1、Track2 是子。
父子组件之间如何通信：父元素传一个函数给子元素，子元素在恰当的时候调用这个函数。
爷孙之间的通信：
若Track1、Track2 在另一个组件里，如下例代码
class App extends React.Component {
//省略了一些代码
render(){
return(
<div>
<div className="header">
<Time1 result={this.state.result1} />
<Time2 result={this.state.result2} />
</div>
<Playground
success1={this.success1.bind(this)}
success2={this.success2.bind(this)}
/>
</div>
)
}
}
//省略了一些代码
function Playground(props){
let success1 = props.success1
let success2 = props.success2
return(
<div className="playground">
<Track1 success={success1} />
<Track2 success={success2} />
</div>
)
}
App 是爷，Playground是爸，Track1、Track2 是孙。
爷孙组件之间如何通信：爷爷把函数传给爸爸，爸爸把函数传给孙子，孙子在恰当的时候调用这个函数。
面试题：请简述 React 父子组件之间如何通信。
参考答案
父组件要传数据给子组件很简单，直接放在 props 里即可
子组件要传递数据给父组件就复杂点：
- 父组件将一个函数 fn 作为子组件的 props 传给子组件
- 子组件在恰当的时候调用这个 fn，并且把数据放在 fn 的参数里
