小编典典

React / JSX动态组件名称

javascript

我正在尝试根据组件的类型动态呈现组件。

例如:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

那给我一个编译时的错误(使用browserify进行gulp)。我使用数组语法的地方应该是XML。

我可以通过为每个组件创建一个方法来解决此问题:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但这将意味着为我创建的每个组件提供一种新方法。必须对此问题有一个更优雅的解决方案。

我很乐意提出建议。


阅读 1222

收藏
2020-05-01

共1个答案

小编典典

<MyComponent />编译为React.createElement(MyComponent,{}),它期望将字符串(HTML标记)或函数(ReactClass)作为第一个参数。

您可以只将组件类存储在名称以大写字母开头的变量中。

var MyComponent = Components[type + "Component"];
return <MyComponent />;

编译为

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});
2020-05-01