2
votes

Rendu de fractionnement de code d'importation Webpack

J'essaye de faire une division de code basée sur des composants. Webpack 3.

    loadDecisions = async () => {
    if (!this.TmplDecisions) {
      this.TmplDecisions = await import(
        /* webpackChunkName: "chunk-templates-decisions" */ 'src/components/decisions'
      );
    }

    return this.TmplDecisions;
  }

  renderDecisions () {
    if (this.TmplDecisions && this.TmplDecisions.default) {
      return <this.TmplDecisions.default 
        {...this.props} 
        logOpenEvent={this.logTagOpenEvent}
      />;
    } else return null;
  };

Le composant apparaît bien dans le débogueur des outils de développement, mais il est rendu sous la forme

Quelqu'un peut-il aider?

javascript reactjs webpack preact

6 commentaires

Eh bien, tout va bien ici. Mais le point probable est que où et comment le renderDecisions est utilisé? est-ce dans une classe séparée (quelque chose comme decisionLoader, ou l'utilisez-vous directement dans un autre composant?

@MojtabaIzadmehr la méthode renderDecisions est appelée à partir de la pile d'appels de méthode render () -> renderLayout () . le renderDecisions renvoie un VNode pour autant que je puisse voir dans les outils de développement. toujours pas comprendre ce qui se passe.

Je suppose que le problème est que vous n'indiquez jamais que le composant a été importé avec succès, et pour re-rendre le composant (c'est probablement la raison pour laquelle, vous pouvez voir sa valeur dans les devTools mais aucun rendu, cependant, vous devriez faire face à une erreur si le composant n'est toujours pas importé et non ). Essayez quelque chose de simple et vérifiez si cela change quelque chose. dans loadDecisions , juste avant le retour, forcez la mise à jour du composant avec this.forceUpdate () .

Cela peut être un bug dans react, merci de le signaler ici aussi Parce qu'en aucune condition il ne doit renvoyer . React appelle les composants fonctionnels et crée une instance de classe après avoir déterminé quel est le type de la fonction. Donc, si le composant n'est pas un composant en soi, il doit renvoyer une erreur.

une chose que j'ai remarquée est que, quel que soit le chemin que je donne au composant à importer, il importe toujours le morceau. Même si le chemin est faux. C'est là que les choses commencent à devenir confuses.

même si vous utilisez des chemins relatifs?

3 Réponses :

0
votes

Votre chemin doit commencer par ./ pour que les importations dynamiques de modules relatifs fonctionnent.

Exemple: / * webpackChunkName: "chunk-templates-decisions" * / './src/components/decisions.js' (notez ./ ici, sinon webpack traite src comme module npm).

1 commentaires

Pouvez-vous créer une reproduction minimale sur codesandbox.io/s/new ? Cela devrait nous aider à mieux déboguer le problème.

0
votes

À partir de la documents a >:

Vous ne pouvez pas utiliser une expression générale comme type d'élément React. Si vous souhaitez utiliser une expression générale pour indiquer le type de l'élément, affectez-la d'abord à une variable en majuscule.

Essayez donc d'abord d'attribuer le type à une variable en majuscules.

Ajoutez également TmplDecisions à l'état (ou utilisez un indicateur par exemple. tmplDecisionsLoaded ), de sorte que React re-render après le chargement de TmplDecisions .

  loadDecisions = async () => {
    if (!this.state.TmplDecisions) {
      const TmplDecisions = await import(
        /* webpackChunkName: "chunk-templates-decisions" */ 'src/components/decisions'
      );

      this.setState({ TmplDecisions });
      return TmplDecisions;
    } else {
      return this.state.TmplDecisions;
    } 
  }

  renderDecisions () {
    if (this.state.TmplDecisions && this.state.TmplDecisions.default) {
      const MyComponent = this.state.TmplDecisions.default;
      return <MyComponent
        {...this.props} 
        logOpenEvent={this.logTagOpenEvent}
      />;
    } else return null;
  };

4 commentaires

ce que vous avez mentionné semble juste. mais cela ne fonctionne toujours pas. Je vois toujours

Vérifiez si vous avez export default ... dans 'src / components / decisions'

J'ai le jeu par défaut d'exportation dans la classe.

ce que vous avez dit est faux, vous pouvez en fait simplement utiliser un champ de classe comme composant, fonctionne très bien, vérifiez-le :)

0
votes

Êtes-vous sûr de ne pas renvoyer une promesse à la première place qui sera ensuite transmise à JSX? Cela vous donnerait indéfini.

componentDidMount() {
  const TmplDecisions = this.TmplDecisions && this.TmplDecisions.default;
  if (TmplDecisions instanceof Promise) {
    TmplDecisions.then((RealTmplDecisions) => this.setState({ TmplDecisions: RealTmplDecisions}));
    return;
  }
  if (TmplDecisions instanceof Function) {
    this.setState({
      TmplDecisions
    });
    return;
  }
}

// On shouldComponentUpdate you need to check 
// if state.TmplDecisions !== undefined 
// among whatever else you are doing there

renderDecisions () {
  if (this.state.TmplDecisions) {
    return <this.state.TmplDecisions 
      {...this.props} 
      logOpenEvent={this.logTagOpenEvent}
    />;
  } else return null;
};

0 commentaires