[JavaScript知识库]React组件通信

组件通信

组件间是相互隔离的，若需要用到外部组件数据，就必须使用组件间通信来传输数据

• 组件通信方法

• 父组件-->子组件

  • 父组件提供要传递的 state 数据

  • 给子组件标签添加属性，值就是 state 数据

  • 子组件使用 props 进行数据的接收

class Parent extends React.Component{
  state = {
    name : 'Jack'
  }
  render() {
    return (
      <div>
        <App name={this.state.name}/>
      </div>
    )
  }
}
// 子组件使用 props 接收数据

• 子组件--> 父组件

  思路：父组件提供一个回调函数，子组件调用，将要传递的数据作为回调函数的参数传递到父组件

  • 父组件提供回调函数

  • 将回调函数作为属性值，传递给子组件

  • 子组件通过 props 调用回调函数

  • 将子组件要传递的数据作为参数传递给回调函数

// 父组件传递数据
class Parent extends React.Component{
  state = {
    message : ''
  }
  getChild = (msg) => {
    this.setState({
      message : msg
    })
  }
  render() {
    return (
      <div>
        <Child getMsg={this.getChild}/>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

// 子组件使用 props 接收数据
class Child extends React.Component{
  state = { name : 'Tom'}
  handleClick = () => {
    this.props.getMsg(this.state.name)
  }
  render() {
    return (
      <button onClick={this.handleClick}>点我传送数据</button>
    )
  }
}

• 兄弟组件之间

  将数据传送到最近的公共父组件中，然后由公共父组件进行管理

  需要通信的子组件使用 props 接收状态或操作状态

  // 公共父组件
  class Parent extends React.Component{
    // 状态共享
    state = {
      count : 0
    }
    // 修改数据
    onChange = () => {
      this.setState({
        count : this.state.count + 1
      })
    }
    render() {
      return (
        <div>
          <Child1 count = {this.state.count} />
          <Child2 onChange = {this.onChange}/>
        </div>
      )
    }
  }
  
  const Child1 = props => {
    return <h1>计数器：{props.count}</h1>
  }
  
  const Child2 = props => {
    return <button onClick={() => props.onChange()}>+1</button>
  }
  
  ReactDOM.render(<Parent />, document.getElementById('root'))

• 跨组件通信

  • 调用 React.createContext() 创建 Provider （提供数据） 和 Consumer(消费数据) 两个组件

  • 使用 Provider 组件作为父节点

  • 在 Provider 组件中设置一个 value 属性，表示需要传输的数据

<Provider value="xxx">
    ...
</Provider>

• 调用 Consumer 组件接收数据

  <Consumer>
    {data => <h1>{data}</h1>}
  </Consumer>