Warm tip: This article is reproduced from stackoverflow.com, please click
import javascript reactjs components react-component

React

发布于 2020-03-27 10:27:05

I have a page which renders different components based on user input. At the moment, I have hard coded the imports for each component as shown below:

    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

However, I change/add components all the time. Is there a way to perhaps have a file which stores ONLY the names and paths of the components and these are then imported dynamically in another file?

Questioner
LEJ
Viewed
26
分享
LEJ 2018-01-16 17:13

I think there may have been some confusion as to what I was trying to achieve. I managed to solve the issue I was having and have shown my code below which shows how I solved it.

Separate File (ComponentIndex.js):

    let Components = {};

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

    export default Components

Main File (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

This method allows me to add/remove components very quickly as the imports are in one file and only requires changing one line at a time.

LEJ 2018-09-12 23:30:29

The aim was to load in new components with as little change to the code as possible. This method requires an addition of only one line.

totymedli 2019-02-09 04:58:52

You could also do export { default as Component1 } from './Component1' then import * as componentList from './ComponentIndex' then componentList[type].

siluveru kiran kumar 2019-12-13 17:13:41

why we are accessing with .default again

Related issues

1
Java project with Gradle in IntelliJ IDEA: cannot resolve symbol 'google' but project compiles
2
node js MODULE_NOT_FOUND error in node_modules
3
Python
4
Adding a module (Specifically pymorph) to Spyder (Python IDE)
5
Use type definitions from .d.ts file without importing
6
Importing JSON library into IntelliJ IDEA
7
Python Flask SQLAlchemy: Import app.db to /models/model.py is failing
8
Why import works in this ROS python script
9
How do I make a list of imported classes in Python?
10
VBA to import data from closed workbook and paste into specific worksheet as values