React组件传值(跨级组件)

通过 context 实现

第一种方式：

祖先组件

1. 创建Context，结构出我们需要的Provider(供应方)和Consumer(消费方)

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

2. 导出Consumer

export { Consumer }

3. Provider包裹根元素(这样Provider就是最大的根元素) ，这里Right组件里面又引入了一个子组件RightSon

render() {
    return (
      // 3. Provider包裹根元素
      <Provider value={this.state.color}>
        <div>
          <Right></Right>
        </div>
      </Provider>
    )
  }

子孙组件

消费者,要使用Consumer进行消费(Consumer里面必须要是一个函数，且必须有返回值)

1. 导入Consumer

import { Consumer } from '../App'

2. 进行使用

render() {
    return (
      <div>
        <Consumer>{(value) => <div>RightSon---{value}</div>}</Consumer>
      </div>
    )
  }

第二种方式：

类似于vue2的时间总线EventBus

1. 单独创建一个js文件，不管是供应还是消费，都需要引入这个共同的文件(这样确保使用的是同一个实例)

import { createContext } from 'react'

const myContext = createContext()

export default myContext

2. 供应方，祖先组件提供数据(Son组件里面引入了Grandson组件)

import React, { useState } from 'react'
import Son from './pages/Son/Son.js'
import myContext from './utils/Context.js'

export default function App() {
  let [msg, setMsg] = useState('信息')
  return (
    <div className="App">
      <myContext.Provider value={msg}>
        <Son></Son>
      </myContext.Provider>
    </div>
  )
}

3. 消费方，子孙组件消费数据

import React from 'react'
import myContext from '../../utils/Context.js'

export default function Grandson() {
  return (
    <div>
      <h2>Grandson</h2>
      <myContext.Consumer>
        {(val) => {
          console.log(val)
          return '祖先组件传过来的值是：' + val
        }}
      </myContext.Consumer>
    </div>
  )
}

useContext()的使用

• 简化了Consumer(消费方)这步，可以直接替代Consumer

useContext(context实例对象)   只有一个参数，参数必须是一个context对象。返回值是Provide(提供方)的value值

举例

import React, { useContext } from 'react'
import myContext from '../../utils/Context.js'

export default function Grandson() {
  const value = useContext(myContext)
  // console.log(value)
  return (
    <div>
      <h2>Grandson</h2>

      {/* <myContext.Consumer>
        {(val) => {
          console.log(val)
          return '祖先组件传过来的值是：' + val
        }}
      </myContext.Consumer> */}

      {/* 上面的可以被useContext()替代 */}
      <strong>{value}</strong>
    </div>
  )
}