React Context生成器：构建可复用的状态管理模式

// 课程上下文
const CourseContext = createContext();
const CourseProvider = ({ children }) => {
    const [course, setCourse] = useState(null);
    return (
        <CourseContext.Provider value={{ course, setCourse }}>
            {children}
        </CourseContext.Provider>
    );
};

// 销售上下文
const SaleContext = createContext();
const SaleProvider = ({ children }) => {
    const [sale, setSale] = useState({ name: "A great course", price: 25 });
    return (
        <SaleContext.Provider value={{ sale, setSale }}>
            {children}
        </SaleContext.Provider>
    );
};

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

/**
 * 创建一个通用的React Context和Provider。
 * @param {string} name - 状态变量的名称（例如："course", "sale"）。
 * @param {*} defaultValue - 状态的初始值。
 * @returns {[React.Context, React.Component]} 包含Context对象和Provider组件的数组。
 */
function makeContext(name, defaultValue) {
   // 动态生成setter函数的名称，例如：'setCourse', 'setSale'
   const setterName = `set${name[0].toUpperCase()}${name.substring(1)}`;

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

   // 创建Provider组件
   const Provider = ({ children }) => {
      // 使用useState管理内部状态
      const [value, setValue] = useState(defaultValue);

      // Provider的值对象，动态地包含状态变量和setter函数
      return (
         <Context.Provider value={{ [name]: value, [setterName]: setValue }}>
            {children}
         </Context.Provider>
      );
   };

   // 返回Context和Provider
   return [Context, Provider];
}

// 创建课程Context和Provider
const [CourseContext, CourseProvider] = makeContext('course', null);

// 创建销售Context和Provider
const [SaleContext, SaleProvider] = makeContext('sale', { name: "A great course", price: 25 });

// 示例：如何在应用中使用这些Provider
function App() {
  return (
    <CourseProvider>
      <SaleProvider>
        {/* 你的应用组件，可以在这里消费CourseContext和SaleContext */}
        <MyComponentThatUsesContexts />
      </SaleProvider>
    </CourseProvider>
  );
}

// 示例：如何在子组件中消费Context
import React, { useContext } from 'react';

function MyComponentThatUsesContexts() {
  const { course, setCourse } = useContext(CourseContext);
  const { sale, setSale } = useContext(SaleContext);

  return (
    <div>
      <h1>课程名称: {course ? course.name : '未设置'}</h1>
      <button onClick={() => setCourse({ id: 1, name: 'React Mastery' })}>设置课程</button>

      <h2>销售产品: {sale.name} (价格: ${sale.price})</h2>
      <button onClick={() => setSale(prev => ({ ...prev, price: prev.price + 5 }))}>提高价格</button>
    </div>
  );
}