Estoy transfiriendo algunos accesorios de un diseño a todos los niños. Esto funciona cuando el elemento secundario es el elemento secundario de un diseño directo, pero no funciona cuando envuelvo el elemento secundario de un diseño en, por ejemplo, un div.
Caso de trabajo:
<Layout > <SectionA language={props.language} /> </Layout>Pero no en este caso:
<Layout > <div> <SectionA language={props.language} /> </div> </Layout> * Cuando accedo a props.language en el componente <SectionA /> , no está definido
Así es como estoy transfiriendo los accesorios del diseño a sus elementos secundarios.
render(){ const children = React.Children.map(this.props.children, (child, index) => { return React.cloneElement(child, { language: this.state.language, }); }); return ( {children} ) }Este parece un buen caso para el gancho useContext. Esto le permitiría pasar el idioma como contexto a todos los elementos secundarios del proveedor de contexto. Por ejemplo:
import React, { createContext, useContext } from 'react'; const LanguageContext = createContext(); const LanguageProvider = (props) => { // Can set up state here if needed return ( <LanguageContext.Provider value={'defaultLanguage'}> {props.children} </LanguageContext.Provider> ); // Wrap the components that need access to the context in the provider const App = () => { return ( <LanguageProvider> <Layout > <div> <SectionA /> </div> </Layout> </LanguageProvider> ); } // And to access that context in SectionA (or any other child) const SectionA = () => { const language = useContext(LanguageContext); return (<h1>Language is {language}</h1>); }Estoy bastante seguro de que hay una mejor manera de hacer esto (probablemente en el archivo de diseño), pero así es como resolví este problema:
Primero usé un segundo hoc para envolver y diseñar el componente sectionA:
function simpleWrapper(props) { return( <React.Fragment> <div className='container'> <SectionA language={props.language}/> </div> <div> <SectionB language={props.language}/> </div> ... <style jsx>{` .container { Stuff `}</style> </React.Fragment> ) } export default simpleWrapper;Y luego transferí todos los accesorios a este contenedor:
<Layout > <SimpleWrapper language={props.language} /> </Layout>)
Tenga en cuenta que estoy usando este enfoque porque tengo más de un componente dentro de