Soy nuevo en reaccionar y me preguntaba si se le permite pasar directamente uno o más componentes a otro en lugar de pasarlo como accesorio o elemento secundario.
Considera lo siguiente:
const ChildComponent = () => { return ( <h1> I am a child </h1> ); } const ChildComponent2 = () => { return ( <h1> I am also a child </h1> ); } //Passing directly to Parent const ParentComponent = () => { return ( <div> <ChildComponent/> <ChildComponent2/> </div> ); } //Passing as children const ParentComponent2 = ({ChildComponent, ChildComponent2}) => { return ( <div> {ChildComponent} {ChildComponent2} </div> ); } <ParentComponent> <ChildComponent/> <ChildComponent2/> </ParentComponent>He leído acerca de pasar componentes como niños frente a accesorios. También he visto que es un antipatrón para crear componentes funcionales dentro de componentes funcionales. Parece que no puedo encontrar nada sobre pasar directamente uno o más componentes dentro de otro sin usar accesorios o niños. Al probarlo, el componente se representó correctamente, pero no estoy seguro de si es una forma válida de pasar componentes a un componente principal.
Con el modelo de composición de React, puede aprovechar el accesorio especial para children para pasar elementos de niños directamente.
// With props object destructuring const ParentComponent = ({children}) => { return ( <div> {children} </div> ); } // Without props object destructuring const ParentComponent = (props) => { return ( <div> {props.children} </div> ); }Esto le permite pasar otros componentes como elementos secundarios al componente principal anidando el JSX:
// A pair of children components const ChildComponent1 = () => { return <div>I am child 1</div>; }; const ChildComponent2 = () => { return <div>I am child 2</div>; }; // Compose your parent component with its children const App = (props) => { return ( <ParentComponent> <ChildComponent1 /> <ChildComponent2 /> </ParentComponent> ); }Según los documentos de React, esta es la forma recomendada de componer sus componentes.
Como pensamiento final, a veces es posible que necesite componentes especializados o parciales y tal vez no haga uso de elementos secundarios, sino que siempre represente un componente específico.