Como se indica aquí , una buena manera de pasar propiedades al componente secundario es a través del patrón de composición. Mi problema es que necesito pasar accesorios de varios componentes al mismo niño, con la máxima desacoplamiento:
export default function App() { const foo = true; return ( <div className="App"> <Parent> <Child foo={foo} /> </Parent> </div> ); } function Parent(props) { function methodA() { return true; } // return <div>I'm the parent! {props.children(methodA)}</div>; // <-- gives me error! return <div>I'm the parent! {props.children}</div>; } function Child(props) { return ( <div> I'm the child! <br /> App pass me foo: {props.foo.toString()} <br /> Parent pass methodA: {/*props.methodA().toString()<-- gives me error!*/} </div> ); } Como puede ver, no tengo ningún problema para pasar valores de mi superior al más bajo, o del medio al inferior, pero no puedo lograr una manera de hacer ambos al mismo tiempo, usando children accesorios secundarios para mantener cosa desacoplada.
¿Es eso posible de alguna manera?
No estoy seguro de si el patrón anterior puede llamarse estrictamente composition . A mi modo de ver, la composición implicaría que la App pasara a Child como accesorios Parent Parent modifica a Child de ninguna manera. Pero eso podría ser un tecnicismo.
De todos modos, el problema aquí parece ser que no puede pasar el methodA al Child secundario. Una forma de resolver esto es Child el elemento secundario en el componente principal y Parent sus accesorios. Entonces, su nuevo Parent se vería así:
function Parent(props) { function methodA() { return true; } const NewChild = React.cloneElement(props.children); return <div>I'm the parent! <NewChild methodA={methodA} /></div>; } Puedes leer más sobre cloneElement aquí .
De los documentos de ReactJS :
Recuerde que los componentes pueden aceptar accesorios arbitrarios, incluidos valores primitivos, elementos React o funciones.
Podría hacer que los children de Parent sean una función.
export default function App() { const foo = true; return ( <div className="App"> <Parent>{(methodA) => <Child foo={foo} methodA={methodA} />}</Parent> </div> ); } function Parent(props) { function methodA() { return true; } return <div>I'm the parent! {props.children(methodA)}</div>; } function Child(props) { return ( <div> I'm the child! <br /> App pass me foo: {props.foo.toString()} <br /> Parent pass methodA: {props.methodA().toString()} </div> ); }https://codesandbox.io/s/recursing-northcutt-2om3o?file=/src/App.js