React入门 4：组件通信 - 父子/爷孙

以龟兔赛跑为例，做一个组件之间 - 父子/爷孙的通信。

不需用到内部状态的组件就用 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 的参数里

完整代码在这里