javascript - React/JSX 动态组件名称

Question

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

例如:

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

我尝试了此处提出的解决方案 React/JSX dynamic component names

这在编译时给了我一个错误(使用 browserify for gulp)。在我使用数组语法的地方，它需要 XML。

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

newExampleComponent() {
    return <ExampleComponent />;
}

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

但这意味着我创建的每个组件都有一个新方法。必须有更优雅的解决方案来解决这个问题。

我非常乐于接受建议。

Answer 1

<MyComponent />编译为 React.createElement(MyComponent, {}) ，它需要一个字符串(HTML 标签)或一个函数(ReactClass)作为第一个参数。

您可以将您的组件类存储在一个名称以大写字母开头的变量中。参见 HTML tags vs React Components .

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

编译为

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