У меня есть компонент Provider, значения которого я экспортирую с помощью ловушки.
Простая реализация того, что я описываю, такова:
// SomeProvider.jsx
const SomeContext = React.createContext(null);
function SomeProvider(props) {
const [state, setState] = useState(null)
useEffect(() => {
//some logic
setState(newValue)
}, [props.someValue])
return <SomeContext.Provider value={state} {...props} />;
}
const useSome = () => React.useContext(SomeContext);
export { SomeProvider, useSome };
А что, если я захочу использовать этого поставщика контекста более чем в одном месте? Например
// App.jsx
<SomeProvider someValue={valueOne}>
<SomeComponent />
</SomeProvider>
<SomeProvider someValue={valueTwo}>
<SomeOtherComponent />
</SomeProvider>
где valueOne
и valueTwo
могут быть изменены
// SomeComponent.jsx
import { useSome } from 'SomeProvider';
function SomeComponent() {
const someValue = useSome();
return ....
}
// SomeOtherComponent.jsx
import { useSome } from 'SomeProvider';
function SomeOtherComponent () {
const someValue = useSome();
return ....
}
Приведет ли такой подход к тому, что два SomeProvider
экземпляра будут иметь общее значение, что приведет к путанице?
Если это так, то каков будет правильный подход, чтобы каждый SomeProvider
имел свое собственное «частное» значение?
Если это не так, как это работает, поскольку все поставщики являются производными от одного и того же вызова React.useContext()
?
React.createContext()
(он выполняется только один раз в модуле). Я сделаю короткую демонстрацию и вернусь с ответами - person Dimitris Karagiannis   schedule 16.11.2019