react 函数组件 上下文传值

在 React 函数组件中，可以通过 createContext 和 useContext 使用上下文传值。

1. createContext

首先，需要使用 createContext 创建一个上下文对象。

const MyContext = React.createContext(defaultValue);

其中，defaultValue 是可选的默认值。MyContext 对象包含两个属性：Provider 和 Consumer。

2. Provider

在父组件中，使用 Provider 包裹子组件，并传入一个 value 属性，这个属性值会被子组件中 useContext 获取到。

<MyContext.Provider value={/* some value */}>
  <ChildComponent />
</MyContext.Provider>

3. useContext

在子组件中，使用 useContext 获取到父组件中传入的 value。

const value = useContext(MyContext);

完整示例：

import React, { createContext, useContext } from 'react';

const MyContext = createContext('default value');

function ParentComponent() {
  return (
    <MyContext.Provider value="hello">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

在上面的示例中，ChildComponent 组件可以获取到父组件中传入的 value 值，即 "hello"。