reactjs - 如何让组件知道哪个上下文调用该组件？

Question

假设我有一个组件和两个上下文。两种上下文都可以使用该组件。当 context1 使用它时，组件应该自己执行 const context=useContext(Context1) 。当 context2 使用它时，组件本身应该执行 const context=useContext(Context2) 。但是这个组件如何知道现在哪个上下文正在使用它并执行指令呢？

好吧，我会给出一个简单的例子，但实际情况比它更复杂，例如，Common 被包装了很多次，并且两个组件看起来不同。

通用组件

export default function Common(){
  const context=useContext(/*one of the context*/);
  context.setData(newData);
  return (
     <div>{context.data}</div>
  )
}

组件1

export const Context1 = createContext({ data, setData });

export default function Component1() {
  <Context1.Provider value={{data, setData }}>
     <Common />
  </Context1.Provider>
}

组件2

export const Context2 = createContext({ data, setData  });

export default function Component2() {
  <Context2.Provider value={{data, setData }}>
     <Common />
  </Context2.Provider>
}

Answer 1

如果您有一个组件必须选择要使用的上下文，我认为您应该重新考虑您的设计。如果您能解释这两个上下文是什么以及组件如何处理它们，那么帮助会更容易，但您似乎不愿意详细说明。

是否有理由不能使用一个值发生变化的上下文，而不是完全独立的上下文？我想我永远不会知道。

如果您坚持拥有两个上下文并让您的组件在它们之间进行选择，您可以拥有一个指定要使用哪个上下文的上下文。

const Context1 = React.createContext("I'm context one!");
const Context2 = React.createContext("I'm context two!");

const WhichContext = React.createContext(Context1);

function MyComponent() {
  const which = React.useContext(WhichContext);
  const context = React.useContext(which);
  
  return (
    <div>{context}</div>
  );
}

function App () {
  return (
    <WhichContext.Provider value={Context2}>
      <MyComponent />
    </WhichContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>


<div id="app"></div>

您也可以将其作为 Prop 传递:

const Context1 = React.createContext("I'm context one!");
const Context2 = React.createContext("I'm context two!");

const WhichContext = React.createContext(Context1);

function MyComponent(props) {
  const context = React.useContext(props.context);
  
  return (
    <div>{context}</div>
  );
}

function App () {
  return (
      <MyComponent context={Context2} />
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>


<div id="app"></div>