1

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.

1 respuesta 1

2

Encontré la solución, la idea es hacer una función fuera de la clase principal del componente e invocarla pasandole un props donde luego esa función según el valor del props pasado evaluará que componente va a mostrar en el render, quedaría algo como esto:

    import React, { Component } from 'react';
    import { componente1, componente2, componente3 } from '../src/components';
    class Contenido extends Component {
      constructor(props){
        super(props)

        this.state = {
          contenido: 1//Aqui es el valor que le pasare al props de la función
        };

      }

      render() {
        return (
          <div className="container-fluid">
            <LayoutContendio contenido={this.state.contenido} />
          </div>
        )
      }
    }

    function LayoutContendio(props) {

     switch(props.contenido) {

      case 1: return <componente1/>; break;
      case 2: return <componente2/>; break;
      case 3: return <componente3/>; break;
      default: return <componente1/>; break;

    } 

  }
  export default Contenido

Si se fijan cree un state que inicialmente le coloque valor 1 para darle un valor por defecto y ese valor mostrará el componente1 pero si el usuario hace un click y cambia el state a 2 mostraría el componente2 y así sucesivamente, espero les sirva

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.