React / JSX动态组件名称

Question

我试图根据其类型动态呈现组件。例如：var type = "Example";var ComponentName = type + "Component";return <ComponentName />; // Returns <examplecomponent />  instead of <ExampleComponent />我尝试了这里提出的解决方案React / JSX动态组件名称这在编译时给了我一个错误（使用browserify for gulp）。它期望我使用数组语法的XML。我可以通过为每个组件创建一个方法来解决这个问题：newExampleComponent() {    return <ExampleComponent />;}newComponent(type) {    return this["new" + type + "Component"]();}但这对我创建的每个组件都意味着一种新方法。必须有一个更优雅的解决方案来解决这个问题。我对建议很开放。

Answer 1

我想出了一个新的解决方案。请注意我使用的是ES6模块，所以我要求上课。您也可以定义一个新的React类。

var components = {

    example: React.createFactory( require('./ExampleComponent') )

};

var type = "example";

newComponent() {

    return components[type]({ attribute: "value" });

}