¿Cómo pueden los componentes React que se cargan a pedido?

Me imagino que probablemente estés preguntando acerca de la carga diferida de componentes React. En nuestro proyecto estamos utilizando el siguiente enfoque React Router: Enrutamiento declarativo para React, pero también puede ver mi enfoque a continuación.

Esencialmente, estoy siguiendo la propuesta de importación dinámica () tc39 / proposition-dynamic-import que es compatible con Webpack 2: Carga diferida

import React, {Component} de ‘react’;

exportar clase predeterminada SignUpRoute extiende Componente {
constructor (accesorios) {
super (accesorios);
this.AppSidebar = nulo;
}

componentWillMount () {
import (‘../../ shared / app-sidebar / app-sidebar.component’)
.then ((módulo) => {
this.AppSidebar = module.default;
this.forceUpdate ();
})
.catch ((error) => {
console.log (error);
});
}

componentDidMount () {

}

render () {
regreso (

{
this.AppSidebar? : nulo
}

)
};
}

Mi suposición es que desea mostrar los componentes React en función de los datos recuperados de la API. En ese caso, llame a la API en componentDidMount o cualquiera de los controladores de eventos de clic. Cambie el estado del componente utilizando datos de la API. Permita que el componente se represente con el nuevo estado.

buscar (api)
.then (respuesta => respuesta.json)
.then (json => this.setState ({someState: json, show: true}))

render () {
devuelve this.state.show && (

Mostrar los datos aquí

);
}