ReactJS钩子:如何在两个不同的.js文件中使用useContext？

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

// App.js
import React from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  const contextValue = { /* 你的上下文数据 */ };

  return (
    <MyContext.Provider value={contextValue}>
      <ComponentA />
      <ComponentB />
    </MyContext.Provider>
  );
}

export default App;

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

function ComponentA() {
  const contextValue = useContext(MyContext);
  // 使用contextValue
  return <div>{contextValue.someValue}</div>;
}

export default ComponentA;

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

function ComponentB() {
  const contextValue = useContext(MyContext);
  // 使用contextValue
  return <div>{contextValue.anotherValue}</div>;
}

export default ComponentB;