react hook 父子传值

在 React 中，可以通过使用 useContext() 钩子来在父组件和子组件之间共享数据。

1. 在父组件中创建一个上下文对象：

import { createContext } from 'react';

export const MyContext = createContext({});

2. 在父组件中使用 useState() 钩子来创建一个状态变量，并将它作为上下文对象的值：

import { useState } from 'react';

export const Parent = () => {
  const [value, setValue] = useState('Hello world');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      <Child />
    </MyContext.Provider>
  );
};

3. 在子组件中使用 useContext() 钩子来获取父组件传递下来的数据：

import { useContext } from 'react';
import { MyContext } from './MyContext';

export const Child = () => {
  const { value, setValue } = useContext(MyContext);
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('Hello React')}>Change Value</button>
    </div>
  );
};

这样，当点击子组件中的按钮时，会更新父组件中的状态变量，并将新的值传递到子组件中显示。