How to use React Hooks Context with multiple values for Providers

React 的 useContext 钩子主要用于让你能够通过上下文（context）来访问共享的值，而不必显式地通过组件树逐层传递属性（props）。如果你需要传递多个值，你可以将这些值打包成一个对象，然后将该对象作为 Context Provider 的 value 属性传递。下面是如何实现的示例：

首先，创建一个 Context：

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

// 创建一个 Context 对象
const MyContext = createContext();

其次，使用 MyContext.Provider 组件来包裹你的子组件，并传递一个对象作为 value 属性，这个对象中可以包含多个值：

jsx
function App() {
  // 创建一个包含多个值的对象
  const contextValue = {
    user: { name: 'Alice', age: 25 },
    theme: 'dark',
    language: 'en'
  };

  return (
    <MyContext.Provider value={contextValue}>
      {/* ...你的组件结构 */}
    </MyContext.Provider>
  );
}

最后，在需要访问这些值的子组件中，使用 useContext 钩子来获取这些值：

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

function MyComponent() {
  // 使用 useContext 钩子来访问 Context
  const { user, theme, language } = useContext(MyContext);

  return (
    <div>
      <p>User: {user.name}</p>
      <p>Theme: {theme}</p>
      <p>Language: {language}</p>
    </div>
  );
}

在这个例子中，我们创建了一个 contextValue 对象，包含了用户信息、主题和语言等多个值，并将它传递给了 MyContext.Provider。在 MyComponent 组件中，我们通过 useContext 钩子来访问这些值，并将其解构为单独的变量。现在，MyComponent 组件内部可以直接使用 user、theme 和 language 这些变量，而无需从组件的父组件通过 props 逐级传递。