Muy buenas a todos y espero me puedan ayudar, tengo un componente llamado Contenido el cual debe ser capaz de recibir para luego mostrar según la acción del usuario uno u otro componente, mi pregunta es, Cómo hago para mostrar un componente hijo dinámico y cuál seria la mejor práctica para ello?.
EL componente contenido es así según React en su parte de Containment:
import React, { Component } from 'react';
class Contenido extends Component {
constructor(props){
super(props)
}
render() {
return (
<div className="container-fluid">
{this.props.children}
</div>
)
}
}
export default Contenido
y esto es lo que tengo hasta ahora en el componente que importa al componente Contenido:
render () {
return (
< Contenido>
< Publicaciones/>
< /Contenido>
)
}
Cabe resaltar si se dan cuenta que dentro de Contenido paso otro componente llamado Publicaciones, la idea es pasar allí componente dinamicamente, por defecto seria Publicaciones pero imaginen que el usuario da click en un menú y debería de mostrarse otro componente allí.
Seria algo como asi:
render () {
return (
< Contenido>
< Publicaciones/>
ó
< OtroComponente/>
ó
< OtroComponente/>
ó
...
< /Contenido>
)
}
Espero me sepa explicar.