React

React 组件通讯

联系站长 作者:web知道 来源:未知 2020-01-14 23:38 我要评论

React 组件通讯...

父组件向子组件通讯
通讯是单向的,数据必须是由一方传到另一方。在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。

class ChildOne extends Component{
  render() {
    return <p>{this.props.msg}</p>
  }
}
 
class Parent extends Component {
  constructor() {
    super()
    this.state = {
      val: 'hello world'
    }
  }
 
  render() {
    return (
      <div>
        <ChildOne msg={this.state.val}/>
      </div>
    );
  }
}

子组件向父组件通讯
而子组件向父组件通讯,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的,是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。

class ChildOne extends Component{
  transferMsg = () => {
    this.props.getChildMsg('我报名了前端课程!')
  }
  render() {
    return <button onClick={this.transferMsg}>点击传值给父组件</button>
  }
}
 
class Parent extends Component {
  constructor() {
    super()
    this.state = {
      msg: 'hello world'
    }
  }
  
  handleMsg = (msg) => {
    this.setState({
      msg
    })
  }
 
  render() {
    return (
      <div>
        <div>儿子给我说:{this.state.msg}</div>
        <ChildOne getChildMsg={this.handleMsg} />
      </div>
    );
  }
}

兄弟组件间通讯
对于没有直接关联关系的两个节点,他们唯一的关联点,就是拥有相同的父组件。参考之前介绍的两种关系的通讯方式,如果我们要ChildOne和ChildTwo进行通讯,我们可以先通过 ChildOne 向 Parent 组件进行通讯,再由 Parent 向 ChildTwo 组件进行通讯。注意:这个方法有一个问题,由于 Parent 的 state 发生变化,会触发 Parent 及从属于 Parent 的子组件的生命周期。

class ChildOne extends Component{
  transferMsg = () => {
    this.props.getChildMsg('Hello kitty!')
  }
  render() {
    return <button onClick={this.transferMsg}>点击传值给父组件</button>
  }
}
 
class ChildTwo extends Component {
  render() {
    return <p>我兄弟说:{this.props.msg}</p>
  }
}
 
class ChildThree extends Component {
  componentDidUpdate() {
    console.log('child 3 updated');
  }
  render() {
    return <p>child 3,我和兄弟1和兄弟2之间的通信没有任何关系</p>
  }
}
 
class Parent extends Component {
  constructor() {
    super()
    this.state = {
      msg: 'hello world'
    }
  }
  
  handleMsg = (msg) => {
    this.setState({
      msg
    })
  }
 
  render() {
    return (
      <div>
        <div>儿子给我说:{this.state.msg}</div>
        <ChildOne getChildMsg={this.handleMsg} />
        <ChildTwo msg={this.state.msg} />
        <ChildThree/>
      </div>
    );
  }
}




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读