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)的主要组件中有一个函数，它获取一个字符串输入，例如ComponentA或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];

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

在ReactJS中按字符串名称获取组件

1 个答案: