3

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!!

2
  • ¿Para qué llamas a createElement? ¿No te basta con <Perfil>{ this.props.extraComponent }</Perfil>?
    – gugadev
    Commented el 7 mar. 2017 a las 18:29
  • Necesito pasar "props" como parametro Commented el 7 mar. 2017 a las 18:57

2 respuestas 2

3

Podrías probar con

<this.props.extraComponent {...props} />

El valor que pasas en el prop extraComponent es un Component como tal, por lo tanto puedes usarlo con sintaxis de JSX.

2
  • Funciona perfectamente, gracias! Commented el 8 mar. 2017 a las 11:36
  • 1
    Esto esta en contra el diseño de React al pasar componentes directamente en props y utilizando esa variable como un literal en la definición del componente... es un pésimo diseño, jamas hagas eso. Commented el 8 mar. 2017 a las 14:34
2

Hay dos técnicas para esto: composición y herencia, React utiliza composición, mira la documentación, un ejemplo donde se utiliza herencia es Swing en Java o Android.

Centrándonos en React la implementación es la siguiente

export class Perfiles extends React.Component {
    ...
    render () {
        return(
            <div>
                {this.props.children}
            </div>
        )
    }
}

posteriormente utilizas tu componente de la siguiente manera

<Perfiles usuarios={lista} />
    <Titulo nombre="Jose Maria" apellido="Toscano"/>
</Perfiles>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.