Necesito pasar como parámetro un componente para que se renderize desde otro componente.
En el siguiente ejemplo quiero renderizar Titulo1 o Titulo2 dentro de Perfil
Dados los componentes:
export class Titulo1 extends React.Component {
render () {
return (<div><H2>this.props.nombre</H2><h3>this.props.apellido</H3></div>)
}
}
export class Titulo2 extends React.Component {
render () {
return (<div><H1>this.props.nombre</H1><h2>this.props.apellido</H2></div>)
}
}
y
export class Perfiles extends React.Component {
render () {
let perfiles= this.props.usuarios.map((usuario, index, coll) => {
var props = {
id: usuario.id,
index: index,
apellido: usuario.apellido,
nombre: usuario.nombre
}
return (<Perfil {...props}>
{React.createElement(this.props.extraComponent, props)}
</Perfil>)
}, this)
}
return ({perfiles})
}
}
export class Perfil extends React.Component {
render () {
return (<div><H2>this.props.id</H2>{this.props.children}</div>)
}
}
el objetivo es llamar a
<Perfiles extraComponent={Titulo1} usuarios={lista} />
o
<Perfiles extraComponent={Titulo2} usuarios={lista} />
según se necesite, pero no me deja me da error en React.createElement(this.props.extraComponent, props)
.
¿Alguna sugerencia? ¡¡muchas gracias!!
createElement
? ¿No te basta con<Perfil>{ this.props.extraComponent }</Perfil>
?