reactjs - 在 ReactJS 中通过字符串名称获取组件

Question

我有一个组件，其中导入了一些其他组件，例如：

import ComponentA from './components/ComponentA.js';
import ComponentB from './components/ComponentB.js';
import ComponentC from './components/ComponentC.js';
class Main extends Component {
...

然后我在名为的主组件中有一个函数returnChild(String childName)，它获取字符串输入，例如ComponentAor ComponentB，并返回组件对象。

现在我正在使用一个开关盒来做这件事，但是组件太多了，而且我的源代码很乱。有没有办法在reactJS中通过字符串名称获取值？例如：

returnChild = (childName) => {
    return get_value_by_name(childName)
} 

Answer 1

您可以对组件进行配置，然后根据配置返回组件。例如，

import ComponentA from './components/ComponentA.js';
import ComponentB from './components/ComponentB.js';
import ComponentC from './components/ComponentC.js';
....

const STRING_TO_COMPONENTS = {
    'componentA': componentA,  //the key is a string and value is a component object
    'componentB': componentB,  
    'componentC': componentC,  
    ....
}

在使用时，您可以像这样使用它

returnChild = childName => STRING_TO_COMPONENTS[childName];

那将是我所知道的最简洁的方法。