React/Webpack bedingt zurück require.ensure Komponente (Codeaufteilung)

Question

Ich habe eine Subkomponente, die nicht sofort geladen werden muss, die ich ausspalten möchte. Ich versuche, eine Reaktionskomponente über require.ensure bedingt zu laden. Ich bekomme keine Konsolenfehler, aber ich sehe auch nichts geladen werden. Hier ist der Code, den ich anrufe:

renderContentzones() { 
if (this.props.display) { 
    return require.ensure([],() => { 
    const Component = require('./content-zones/component.jsx').default; 

    return (
     <Component 
     content={this.props.display} 
     /> 
    ); 
    }); 
} 
return null; 
} 

Es ist nur ein leerer Bildschirm derzeit Rendern (keine Fehler). Das hat vorher funktioniert, als ich import 'displayComponent' from './content-zones/component.jsx' verwendet habe und es einfach so zurückgegeben habe wie du normalerweise reagieren würdest, anstatt dies zu verlangen.sicher aber. Nicht sicher, was ich hier falsch mache, irgendeine Idee, wie man so etwas machen kann? Vielen Dank!

Answer 1

Dies ist eine Möglichkeit, es zu tun, um den Zustand mit der dynamisch belasteten Komponente zeigen:

constructor(){ 
    this.state = {cmp:null}; 
    } 

    addComponent() { 
     const ctx = this; 
     require.ensure(['../ZonesComponent'], function (require) { 
      const ZonesComponent = require('../ZonesComponent').default; 
      ctx.setState({cmp:<ZonesComponent />}); 
     }); 
    } 

    render(){ 
    return (
     <div> 
      <div>Some info</div> 
      <div><button onClick={this.addComponent.bind(this)}>Add</button></div> 

      <div> 
       {this.state.cmp} 
      </div> 
     </div> 

    ); 

} 

Wenn Sie auf die Schaltfläche Hinzufügen drücken, wird die Komponente angezeigt.
Hoffe diese Hilfe.