使用React Hook应用多个上下文的好方法

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

// 创建第一个上下文
export const Context1 = createContext();

// 创建第二个上下文
export const Context2 = createContext();

// 创建一个包含多个上下文提供器的组件
export const ContextProvider = ({ children }) => {
  const [data1, setData1] = useState('Context 1 Data');
  const [data2, setData2] = useState('Context 2 Data');

  return (
    <Context1.Provider value={{ data1, setData1 }}>
      <Context2.Provider value={{ data2, setData2 }}>
        {children}
      </Context2.Provider>
    </Context1.Provider>
  );
};

import React, { useContext } from 'react';
import { Context1, Context2 } from './ContextProvider';

const Component1 = () => {
  const { data1, setData1 } = useContext(Context1);

  return (
    <div>
      <h2>Component 1</h2>
      <p>Data from Context 1: {data1}</p>
      <button onClick={() => setData1('Updated Context 1 Data')}>
        Update Context 1 Data
      </button>
    </div>
  );
};

const Component2 = () => {
  const { data2, setData2 } = useContext(Context2);

  return (
    <div>
      <h2>Component 2</h2>
      <p>Data from Context 2: {data2}</p>
      <button onClick={() => setData2('Updated Context 2 Data')}>
        Update Context 2 Data
      </button>
    </div>
  );
};

const App = () => {
  return (
    <ContextProvider>
      <Component1 />
      <Component2 />
    </ContextProvider>
  );
};

export default App;