React组件传值(跨级组件)

通过 context 实现

第一种方式：

祖先组件

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

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

2. 导出Consumer

export { Consumer }

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

render() {
    return (
      // 3. Provider包裹根元素
      
        

          
        
      
    )
  }

子孙组件

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

1. 导入Consumer

import { Consumer } from '../App'

2. 进行使用

render() {
    return (
      

        {(value) => 
RightSon---{value}
}
      
    )
  }

第二种方式：

类似于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 (
    

      
        
      
    
  )
}

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

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

export default function Grandson() {
  return (
    

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

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 (
    

      
Grandson

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

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