我有一个页面，可根据用户输入呈现不同的组件。目前，我已经对每个组件的导入进行了硬编码，如下所示：
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
但是，我一直都在更改/添加组件。有没有办法使文件仅存储组件的名称和路径，然后将它们动态导入另一个文件中？
我认为对于我想要实现的目标可能有些困惑。我设法解决了我遇到的问题，并在下面显示了我的代码，其中显示了我的解决方法。
单独的文件（ComponentIndex.js）：
let Components = {};
Components['Component1'] = require('./Component1').default;
Components['Component2'] = require('./Component2').default;
Components['Component3'] = require('./Component3').default;
export default Components
主文件（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
这种方法使我可以非常快速地添加/删除组件，因为导入位于一个文件中，并且一次只需要更改一行即可。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句