У меня есть страница, которая отображает различные компоненты на основе пользовательского ввода. На данный момент я жестко запрограммировал импорт для каждого компонента, как показано ниже:
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
Однако я все время меняю / добавляю компоненты. Есть ли способ, возможно, иметь файл, в котором хранятся ТОЛЬКО имена и пути компонентов, которые затем динамически импортируются в другой файл?