Digamos que tengo un componente contenedor:
// wrapper that renders component passed as a prop const Component = (childrenComponent) => <div>{childrenComponent}</div>Lo que me gustaría hacer es invocar Component dentro de alguna página, como:
import React from 'react' const Page = () => { const ChildrenComponent = () => <div>Children Component</div> return <Component childrenComponent={ChildrenComponent} /> }Esto funcionará bien. Mi pregunta es, dado que los nombres de los accesorios deben estar en minúsculas, ¿cómo puedo cambiar el código del componente contenedor para poder invocar a ChildrenComponent de una manera JSX (en lugar de en línea {childrenComponent}, mientras cumplo con el requisito de nombrar los componentes de reacción en PascalCase:
// this will not work const Component = (childrenComponent) => <div><childrenComponent /></div> // this will work but the prop name isn't camelCase const Component = (ChildrenComponent) => <div><ChildrenComponent /></div>Puede configurar el Component de esta manera:
const Component = props => { return ( <div>{props.children}</div> ) } Usando Component :
<Component> <ChildrenComponent/> </Component>Más material de lectura de los documentos
Puede usar cloneElement de la siguiente manera:
const Component = (children, ...props) => { const clonedChild = cloneElement(children(), props) return <>{clonedChild}</> }Debe envolver el resultado devuelto en un fragmento.