react隔代传值

react隔代传值的方式有很多，开发中可能经常会用到props一层一层向下传值，更多的可能是用到react-redux。今天我们来看看Context的传值，一样可以实现隔代传值。下面实现一些小demo来看看。

创建一个全局的Context，在项目中也可以写一个单独的组件从外部导入。

const demoContext = React.createContext();
const { Provider, Consumer } = demoContext;

第一种：

//定义一个父组件
function Parent(){
  return(
      <div>
        <Provider value="parent-son-grandson">//把需要传值的组件要放到Provider里面
          <Consumer>
            {value => <Son val={value}></Son>}
          </Consumer>
        </Provider>
      </div>
  )
}
//定义一个子组件
function Son(props){
  return(
    <div>
      son---{props.val}
      <Consumer>
        {value => < Grandson item={value}></Grandson >}
      </Consumer>
    </div>
  )
}
//定义一个孙组件
function Grandson(props){
  return <div>Grandson --- {props.item}</div>
}
export default Parent

1.png

Provider中定义的value值通过Consumer将值传给了子和孙，Provider里面可以包含多个Consumer并不只是一个。

第二种孙组件是类组件：

//父组件不变，子组件添加一个孙组件2，再创建一个孙组件
function Son(props){
  return(
    <div>
      son---{props.val}
      <Consumer>
        {value => <Grandson item={value}></Grandson>}
      </Consumer>
      <Grandson2></Grandson2>//孙组件2
    </div>
  )
}
//定义类组件Grandson2
class Grandson2 extends React.Component{
  static contextType = demoContext;
  render(){
    return(
    <div>Grandson2 ---- {this.context}</div>
    )
  }
}

注意：定义的静态成员contextType以及this.context这两个是固定的不是自定义的。

2.png

第三种利用hooks

//需要引入useContext
import React, {useContext} from "react"

子组件添加Grandson3,再创建一个Grandson3

function Son(props){
  return(
    <div>
      son---{props.val}
      <Consumer>
        {value => <Grandson item={value}></Grandson>}
      </Consumer>
      <Grandson2></Grandson2>
      <Grandson3></Grandson3>
    </div>
  )
}
//定义Grandson3
function Grandson3(){
  const myContext = useContext(demoContext);
  return <div>Grandson3 -- {myContext}</div>
}

3.png

我们发现使用hooks传值非常便利。

其实我们可以完全不用Consumer;只需要保障Son组件在Parent组件的Provider中包裹就可以。Son如果需要用到父组件的值可以使用Consumer传递，也可以采用后两种方法传值。