美文网首页
组件通信

组件通信

作者: clumsy钧 | 来源:发表于2019-01-05 21:38 被阅读1次

    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

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

    相关文章

      网友评论

          本文标题:组件通信

          本文链接:https://www.haomeiwen.com/subject/yrbdrqtx.html