Solución alternativa en la parte inferior de la pregunta.
Estoy tratando de pasar accesorios a un componente secundario usando {niños}.
El componente Padre:
const FatherComp = ({ children, propsToPassToChild }) => ( <div>Dynamic component content: {children} </div> )El componente hijo:
const ChildComp = ({ childProps }) => <p>This is the dynamic content</p>Usándolos así:
<FatherComp> <ChildComp/> // childProps cannot be passed here since it's inside FatherComp </FatherComp>Quiero pasar a ChildComp los accesorios (propsToPassToChild) de FatherComp directamente:
const FatherComp = ({ children, propsToPassToChild }) => ( <div>Dynamic component content: >>>>> {children} <<<<< *passing the props somewhere here* </div> )¿Es posible lograr lo que estoy tratando de hacer con los componentes funcionales de reacción directamente y sin administración de estado?
¡Gracias!
************ Mi solución ***********
Entonces, después de un tiempo en un proyecto diferente, me encontré con la misma pregunta y encontré una solución.
const Father = ({ child }) => { return ( <div> {child({ text: 'I am props from father' })} </div> ); }; const Child = ({ text }) => { return ( <div>Hey there {text}</div> ); };y renderizar el componente Padre:
const App = () => <Father child={Child} />Simplemente pase al niño en los accesorios del padre como una función que devuelve un componente. Aunque no es una solución 'directa', resolvió el problema sin envolver al niño con el padre.
Deberías usar render props
referencia:https://reactjs.org/docs/render-props.html#gatsby-focus-wrapper
Sí, tienes que hacer algo como esto:
<FatherComp> <ChildComp name="John" age="21"/> </FatherComp> const FatherComp = (props) => ( <div>Dynamic component content: {props.children} </div> ) Acepte accesorios en FatherComp y use {props.children} para representar todos los componentes secundarios dentro de su componente Padre.