react usecontext 子传父

在 React 中，可以使用 useContext 钩子来实现子组件向父组件传值。使用 useContext 钩子需要先在父组件中使用 createContext 创建一个 Context 对象。然后，在父组件中使用 Provider 组件将要传递的值传入 Context 对象中。最后，在子组件中使用 useContext 钩子获取 Context 对象中的值。

下面是一个示例：

import React, { useContext } from 'react';

// 创建 Context 对象
const UserContext = React.createContext({});

function Parent() {
  const user = { name: 'Alice', age: 20 };

  // 使用 Provider 组件将值传入 Context 对象中
  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  // 使用 useContext 钩子获取 Context 对象中的值
  const user = useContext(UserContext);

  return <div>{user.name}</div>;
}

在上面的示例中，Parent 组件创建了一个 Context 对象 UserContext，并通过 Provider 组件将一个用户对象传入 UserContext 中。Child 组件通过 useContext 钩子获取 UserContext 中的用户对象，并渲染用户的名字。这样就实现了子组件向父组件传值的功能。