Este código explica que podemos pasar componentes y contenido como accesorios, pero ¿alguien puede explicar cuál es la buena práctica para codificar? ¿Cuál será mejor, pasar componente o contenido como accesorios?
function SplitPane(props) { return ( <div className="SplitPane"> <div className="SplitPane-left"> {props.left} </div> <div className="SplitPane-right"> {props.right} </div> </div> ); } function App() { return ( <SplitPane left={ <Contacts /> } right={ <Chat /> } /> ); }; **OR** function SplitPane(props) { return ( <div className="SplitPane"> <div className="SplitPane-left"> <Contacts>{this.props.contacts}</Contacts> </div> <div className="SplitPane-right"> <Chat>{this.props.chatContent}</Chat> </div> </div> ); }El primer enfoque es bueno cuando está creando un contenedor: componente que va a usar para muchos dispositivos diferentes. A continuación, puede personalizarlo fácilmente, dando como argumentos left y right lo que quiera.
El segundo es útil cuando decide que su componente debe incluir exactamente los subcomponentes Contacts y Chat , cuando son partes inherentes del mismo; entonces está seguro de que no se cambiarán.
Pero si no está seguro, le sugiero el segundo enfoque: de esa manera evita posibles problemas y puede ver fácilmente en el código qué componentes se procesan, lo que acelera el desarrollo.