0
164
ViewsReaccionar: cómo usar múltiples contextos del mismo tipo y permitir que los niños lean datos de todos ellos
Tengo una cierta configuración de Contexto similar a esta
const DataContext = createContext({ data: null }); const getData = (key) => { switch(key) { case 1: return "Hello" case 2: return " World" default: return null } } export const DataProvider = ({ id, children }) => { const data = useMemo(() => { return getData(id); }, [id]); return ( <DataContext.Provider value={{ data, }} > {children} </DataContext.Provider> ); }; export default DataContextY componentes secundarios que lo usan así.
const HelloComponent = () => { return <DataProvider id={1}> { // children are components that useContext(DataContext) and expect data to be "Hello" } </DataProvider> }Ahora necesito hacer esto
const HelloWorldComponent = () => { return ( <DataProvider id={1}> <DataProvider id={2}> { // children are components that need to read both Hello and World } </DataProvider> </DataProvider> ); };Necesidad de proporcionar todos los datos del contexto principal de una sola definición de contexto a un conjunto de elementos secundarios
Sé que useContext solo puede leer el padre más cercano de un ContextType dado, por lo que no estoy seguro de cómo proceder con esto.
1 answers
Answer question0
No puede usar dos proveedores de contexto del mismo tipo y hacer que los niños reciban de ambos. La API de contexto es tal que los componentes secundarios reciben el valor de contexto del proveedor de contexto más cercano a ellos en el árbol React.
Sin embargo, puede usar un solo proveedor que, en su lugar, devuelva la función getData . Aquí hay un ejemplo que usa un solo DataProvider y un enlace React personalizado para proporcionar el valor de "id".
Datos.Contexto.js
import { createContext, useContext } from "react"; const DataContext = createContext({ getData: () => {} }); const getData = (key) => { switch (key) { case 1: return "Hello"; case 2: return " World"; default: return null; } }; export const useDataContext = (id) => useContext(DataContext).getData(id); const DataProvider = ({ children }) => { return ( <DataContext.Provider value={{ getData }}>{children}</DataContext.Provider> ); }; export default DataProvider;índice.js
<DataProvider> <App /> </DataProvider>Componente hijo
import { useDataContext } from "./Data.Context"; const Child = () => { const data1 = useDataContext(1); const data2 = useDataContext(2); return ( <div> <div>DataProvider 1: {data1}</div> <div>DataProvider 2: {data2}</div> </div> ) } 
