组件通信

2019-01-05  本文已影响1人  clumsy钧

demo链接
父传子组件主要是通过props

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      result1: 0,
      result2: 0
    }
    this.t0 = new Date()
  }
  success(x){
    console.log(x)
    console.log('兔子跑完了,用时')
    let r1 = new Date() - this.t0
    this.setState({
      result1: r1
    })
  }

即把state里面的数据或者class里的方法传递给后代模板
需要注意的是方法的话需要bind this

  render(){
    return (
    <div>
      <div class="header">
        <Time1 result={this.state.result1}/>
        </div>
       <Playground success={this.success1.bind(this)}/>
    </div>
    )
  }
}

给孙组件传递同上
感觉跟之前写轮子用的单项数据流的思想相似
想来应该是vue借鉴的react

孙组件可以通过父系传递过来的方法进行回调来进行通信
上一篇下一篇

猜你喜欢

热点阅读