React中的组件间传值汇总

父传子：属性传值

原理：父级调用子级的时候，在子组件身上绑定一个属性，值为需要传递的数据。子组件中通过 this.props 来获取。

• 父组件的传递：

  import React, { Component } from 'react'
  
  export default class Father extends Component {
      constructor() {
          super();
          this.state = {
              msg:"父组件的msg"
          }
      }
      render() {
          return (
              <div className="Father">
                  <h2>Father</h2>
                  <Child msg={this.state.msg}></Child>
              </div>
          )
      }
  }
  

• 子组件的接收

  import React, { Component } from 'react'
  
  export default class Child extends Component {
      render() {
          return (
              <div>
                  <h2>Child</h2>
                  <p>接收到父组件的值为：{this.props.msg}</p>
              </div>
          )
      }
  }
  

子传父：事件传值

原理：还是父传子的原理，只不过父组件传递给子组件的不是数据，而是一个方法。子组件依然通过 this.props 调用。通过调用父组件传过来的方法，并传递参数的方式，把需要传递的值以父组件传来的方法的参数的形式传递给父组件。从而达到子传父的目的。

• 子组件传递：

  import React, { Component, Fragment } from 'react'
  
  export default class Child extends Component {
      constructor() {
          super();
          this.state = {
              msg: "子组件的msg"
          }
      }
      render() {
          return (
              <div className="Child">
                  <h2>子组件</h2>
                  {/* 点击按钮触发父组件传过来的函数 */}
                  <button onClick={this.clickHandler.bind(this)}>给父级发送msg</button>
              </div>
          )
      }
      clickHandler() {
          {/* 把需要传递给父组件的值当做参数传进去 */}
          this.props.getMsgHandler(this.state.msg)
      }
  }
  

• 父组件接收：

  import React, { Component } from 'react'
  import Child from './Child.jsx'
  
  export default class Father extends Component {
      constructor() {
          super();
          this.state = {
              msg: ""
          }
      }
      render() {
          return (
              <div>
                  <h2>Father</h2>
                  {/* 父组件给子组件传递一个自身的函数，子组件通过调用函数的方式传值给父组件 */}
                  <Child getMsgHandler={this.getMsgHandler.bind(this)}></Child>
                  <p>接收到父组件的值为：{this.props.msg}</p>
              </div>
          )
      }
      {/* 在传递的方法中，接收数据 */}
      getMsgHandler(val){
          this.setState({
              msg:val
          })
      }
  }
  

跨组件传值

一、事件订阅传值

原理，给需要传值的双方绑定同一个事件总线，通过侦听和调用共同的方法，进行传值。

• 传递方：

  import React, { Component } from 'react'
  import Observer from './observer'
  
  export default class Send extends Component {
      constructor() {
          super();
          this.state = {
              msg:"发送方组件的msg"
          }
      }
      render() {
          return (
              <div className="Send">
                  <h2>发送方</h2>
                  <button onClick={this.sendMsgHandler.bind(this)}>给接收方发送msg</button>
              </div>
          )
      }
      sendMsgHandler(){
          {/* 通过抛发侦听好的handler事件来传递值 */}
          Observer.$emit('handler',this.state.msg)
      }
  }
  

• 接收方：

  import React, { Component, Fragment } from 'react'
  import Observer from '../utils/observer'
  
  export default class One extends Component {
      constructor() {
          super();
          this.state = {
              msg: null,
          };
          this.bindEvent();
      }
      bindEvent(){
          {/* 侦听handler事件，以接收信息 */}
          Observer.$on("handler",this.getMsgHandler.bind(this))
      }
      render() {
          return (
              <div className="One">
                  <h2>接收方</h2>
                  {/* 显示接收的值 */}
                  <h4>{this.state.msg2}</h4>
              </div>
          )
      }
      getMsgHandler(val){
          {/* 来电回调，接收值 */}
          this.setState({
              msg:val
          })
      }
  }
  

• observer事件订阅封装：

  原理类似于 vue 中的 $on 和 $emit

  const eventList = {}
  
  const $on = function(eventName,callback){
      if(!eventList[eventName]){
          eventList[eventName] = [];
      }
  
      eventList[eventName].push(callback);
  }
  
  const $emit = function(eventName,params){
      if(eventList[eventName]){
          var arr = eventList[eventName];
          arr.forEach((cb)=>{
              cb(params)
          })
      }
  }
  
  const $off = function(eventName,callback){
      if(eventList[eventName]){
          if(callback){
              var index = eventList[eventName].indexOf(callback);
              eventList[eventName].splice(index,1);
          }else{
              eventList[eventName].length = 0;
          }
      }
  }
  
  export default {
      $on,
      $emit,
      $off
  }
  

二、Provider/Consumer传值

生产者(Provider)/消费者(Consumer) 传值。

其中，生产者（Provider）是父级，消费者（Consumer）是子级。

...

待更新

三、Redux

...

待更新