react hooks 使用provide传递数据给任意子组件数据

下面是一个完整的实例，展示了如何在 React 中使用 React Context 和 useContext Hook 在组件树中传递数据。

首先，我们创建一个上下文 MyContext：

// MyContext.js
import React from 'react';

// 创建一个上下文
const MyContext = React.createContext();

export default MyContext;

接下来，我们创建一个父组件 ParentComponent，它使用 MyContext.Provider 包裹子组件 ChildComponent，并通过 value 属性传递数据：

// ParentComponent.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('初始数据');

  return (
    <MyContext.Provider value={data}>
      <h1>父组件</h1>
      <ChildComponent />
    </MyContext.Provider>
  );
};

export default ParentComponent;

然后，我们创建子组件 ChildComponent，它使用 useContext Hook 访问上下文数据：

// ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const data = useContext(MyContext);

  return (
    <div>
      <h2>子组件</h2>
      <p>来自父组件的数据: {data}</p>
    </div>
  );
};

export default ChildComponent;

最后，我们创建一个 App 组件，它使用 ParentComponent：

// App.js
import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <div>
      <h1>App 组件</h1>
      <ParentComponent />
    </div>
  );
};

export default App;

在这个例子中：

1. 我们创建了一个上下文 MyContext。
2. 父组件 ParentComponent 使用 MyContext.Provider 包裹子组件 ChildComponent，并通过 value 属性传递数据。
3. 子组件 ChildComponent 使用 useContext Hook 访问上下文数据。

这样，我们就实现了在 React 中使用 React Context 和 useContext Hook 在组件树中传递数据。