使用步骤

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

import React from "react'
const { Provider, Consumer} = React.createContext()

2. 使用 Provider 组件作为父节点

<Provider>
    <div>
        <Child1 />
    </div>
</Provider>

3. 设置 value 属性, 表示要传递的数据

<provider value="xxx">

4. 调用 Consumer 组件接收数据

<Consumer>
    {(data)=>{
        return (
            <span>
                data 参数表示接收的数据---{data}
            </span>
        )
    }}
</Consumer>