web-dev-qa-db-fra.com

React - Importer dynamiquement des composants

J'ai une page qui rend différents composants en fonction des entrées de l'utilisateur. Pour le moment, j'ai codé en dur les importations pour chaque composant, comme indiqué ci-dessous:

    import React, { Component } from 'react'
    import Component1 from './Component1'
    import Component2 from './Component2'
    import Component3 from './Component3'

    class Main extends Component {
        render() {
            var components = {
                'Component1': Component1,
                'Component2': Component2,
                'Component3': Component3
            };
            var type = 'Component1';  // just an example
            var MyComponent = Components[type];
            return <MyComponent />
        }
    }

    export default Main

Cependant, je change/ajoute des composants tout le temps. Existe-t-il un moyen d’avoir un fichier qui stocke SEULEMENT les noms et les chemins des composants, qui sont ensuite importés de manière dynamique dans un autre fichier?

javascriptreactjsimportcomponentsreact-component
10
LEJ

Je pense qu'il y a peut-être eu une certaine confusion quant à ce que j'essayais de réaliser. J'ai réussi à résoudre le problème que je rencontrais et j'ai montré mon code ci-dessous, qui montre comment je l'ai résolu.

Fichier séparé (ComponentIndex.js):

    let Components = {};

    Components['Component1'] = require('./Component1').default;
    Components['Component2'] = require('./Component2').default;
    Components['Component3'] = require('./Component3').default;

    export default Components

Fichier principal (Main.js):

    import React, { Component } from 'react';
    import Components from './ComponentIndex';

    class Main extends Component {
        render () {
            var type = 'Component1'; // example variable - will change from user input
            const ComponentToRender = Components[type];
            return <ComponentToRender/>
        }
    }

    export default Main

Cette méthode me permet d’ajouter/de supprimer des composants très rapidement car les importations sont dans un fichier et ne nécessite que de changer une ligne à la fois.

10
LEJ

vous pouvez créer une fonction de construction de composant qui utilise React.createElement . De cette façon, vous pouvez importer la fonction à partir d'un fichier d'aide. Il est difficile d'afficher plus de code dans cet exemple sans plus d'informations, mais vous pouvez également utiliser les aides d'état de ce fichier si votre objectif est de supprimer complètement la logique de ce composant.

class Main extends Component {

constructor(props) {
  super();
  this.state = { displayComponent: Component1 }
}

buildComponent = () => {
  // create element takes additional params for props and children
  return React.createElement( this.state.displayComponent )
}

render() {
    var type = 'Component1';  // just an example
    return (
      <div>
        { this.buildComponent() }
      </div>
    )
}

}

0
Eric Hasselbring
import React, { Component } from 'react'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'

class Main extends Component {
    render() {
        var type = 'Component1';  // just an example
        return (
          <div>
            {type == "Component1" && <Component1 />}
            {type == "Component2" && <Component2 />}
            ...
          </div>
        )
    }
}

export default Main

Vous pouvez utiliser le rendu conditionnel insted. J'espère que ça va aider

Vérifie ça

0
user8685433