我有一个页面,它根据用户输入呈现不同的组件。目前,我已经对每个组件的导入进行了硬编码,如下所示:
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
但是,我一直在更改/添加组件。有没有办法让一个文件只存储组件的名称和路径,然后将它们动态导入另一个文件?