创建通过上下文提供程序返回2个其他函数的React上下文

import React, { createContext } from 'react';

// 创建一个上下文对象
const MyContext = createContext();

// 创建两个函数
function functionA() {
  console.log('This is function A');
}

function functionB() {
  console.log('This is function B');
}

// 创建上下文提供程序组件
function MyContextProvider({ children }) {
  return (
    <MyContext.Provider value={{ functionA, functionB }}>
      {children}
    </MyContext.Provider>
  );
}

export { MyContext, MyContextProvider };

import React, { useContext } from 'react';
import { MyContext } from './MyContextProvider';

function ComponentA() {
  const { functionA } = useContext(MyContext);

  // 使用functionA
  functionA();

  return <div>Component A</div>;
}

function ComponentB() {
  const { functionB } = useContext(MyContext);

  // 使用functionB
  functionB();

  return <div>Component B</div>;
}

function App() {
  return (
    <MyContextProvider>
      <ComponentA />
      <ComponentB />
    </MyContextProvider>
  );
}

export default App;