Dynamisches laden von Komponenten reagieren

Im Grunde läuft es auf pre-erstellen aller chunks, die Sie je brauchen. Dann brauchen Sie nur ein Weg, um dynamisch auf diese verweisen. Hier ist die Lösung, die ich basierend mine auf:

http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack

und hier ist was ich da Tue, verwende ich nicht Reagieren-Router (Randbemerkung: ich dont finden, dass es ein gutes Spiel für redux oder Animationen):

//loader:
{
  test: (folder)\/.*\.js,
  include: path.resolve(__dirname, 'src')
  loader: ['lazy?bundle', 'babel']
}

//dynamic usage within React component:
const My_COMPONENTS = {
   ComponentA: require('./folder/ComponentA'),
   ComponentB: require('./folder/ComponentB'),
}

class ParentComponent extends React.Component {
    componentDidMount() {
        My_COMPONENTS[this.props.name](component => this.setState({component}));
    } 
    render() {
       return <this.state.component />;
    }
}

Also das Ergebnis ist Sie sind dynamisch Rendern einer Komponente, sondern aus einer statischen vordefinierten Satz von Möglichkeiten--alle, während Sie, nur senden nicht mehr an den client als der Brocken die Besucher eigentlich interessiert.

AUCH hier ist eine Komponente, die ich habe, das dies tut gut:

import React from 'react';
import Modal from './widgets/Modal';

export default class AjaxModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      Content: null
    };
  }

  componentDidMount() {
    if(this.props.show) {
      this.loadContent();
    }
  }

  componentWillReceiveProps({show}) {
    if(show && !this.state.Content) {
      this.loadContent(1200); //dont interfere with animation
    }
  }

  loadContent(ms=0) {
    setTimeout(() => {
      this.props.requestLazyBundle(({default: Content}) => {
        this.setState({Content});
      });
    }, ms);
  }

  render() {
    let {Content} = this.state;

    return (
      <Modal title={this.props.title} {...this.props} loading={!Content}>
        {Content ? <Content /> : null}
      </Modal>
    );
  }
}

pass eine asynchrone erfordern bundler Funktion als this.props.requestLazybundle wie diese:

render() {

  let requestLazyBundle = require('bundle?lazy&name=AnotherComponent!../content/AnotherComponent');

  return (
    <AjaxModal title='Component Name' {...props} requestLazyBundle={requestLazyBundle} />
  );
}

Hatte ich eine andere Lösung wegen meinem Problem ein wenig anders, ich suchte nach einer Antwort für eine Weile, aber konnte es nicht finden. Hoffentlich kann jemand helfen.

Mein Problem war, dass wir hatten mehrere Applikationen unabhängig voneinander als unterschiedliche Module innerhalb eines core-UI. Diese mussten komplett voneinander unabhängig einsetzbare innerhalb haben keine Auswirkungen auf die anderen.

Meine Lösung war es, die sub-Komponente Anwendungen verpackt als web-pack-Bibliotheken, indem Sie diese webpack Eigenschaften:

libraryTarget: 'umd',
globalObject: 'this',
library: 'SubComponentName'

Ich denke, 2 Einstiegspunkte, für die die Anwendung basierend auf es zugegriffen wird, entweder direkt oder über eine übergeordnete Komponente in einer separaten Anwendung

class Library extends Component {

    render() {
        return (
            < Provider store = {store} >< BrowserRouter>
                < App isAccessDirect={this.props && this.props.isAccessDirect || false} roles={this.props.roles}>
                </App>
            < /BrowserRouter>< /Provider>
        )
    }
}

class Launcher extends Component {
    render() {
        return (
            ReactDOM.render(
                <Library isAccessDirect="true"/>,
                document.getElementById('root')
            )
        )
    }
}

Einmal diese app gebaut wird kann ich direkt in die index.html mit

<script>
    new Compression.Launcher().render();
</script>

Oder wenn Sie möchten, um Zugriff auf die Anwendung mit einem separaten host - /Komponenten-wie war meine Anforderung können Sie dies tun, indem Sie eine Kombination von loadjs und reagieren.

loadjs(['../sub/component/bundle.min.js'], 'loadSubComponent');

var subComponent = this.getUI('subComponentWrapperElement').get(0);

loadjs.ready('loadSubComponent', function() {

    var roles = my.app.roles;

    ReactDOM.render(
        <SubComponentName.Library roles={roles}></SubComponentName.Library>,
        subComponent
    );
});

Diesem laden kann, in der ein reagieren Komponente in jeder Art von javascript-client-side-framework, in unserem Fall verwendeten wir das Rückgrat in der wrapper-Anwendung. Die bundle.min.js befand sich auch hinter einem reverse-proxy, aber es könnte sich überall befinden, es ist nur wichtig, dass Sie laden Sie es in und warten Sie das laden zu beenden, die loadjs war perfekt in diesem Fall. Eine Letzte wichtige bit an information war, dass die Zerstörung der Komponente war entscheidend für die Sicherstellung einer guten user experience, als ohne stießen wir auf eine Reihe von Fragen.

loadjs.reset();
var subComponent = this.getUI('subComponentWrapperElement').get(0);
ReactDOM.unmountComponentAtNode(subComponent);

So, in einer nussschale, was ich fühle, dieses liefert über die anderen Antworten völlig voneinander unabhängig einsetzbare suite von Anwendungen, die komplett mit Rahmen Agnostiker.