我正在尝试根据组件的类型动态呈现组件。
例如:
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"](); }
但这将意味着为我创建的每个组件提供一种新方法。必须对此问题有一个更优雅的解决方案。
我很乐意提出建议。
<MyComponent />编译为React.createElement(MyComponent,{}),它期望将字符串(HTML标记)或函数(ReactClass)作为第一个参数。
<MyComponent />
React.createElement(MyComponent,{})
您可以只将组件类存储在名称以大写字母开头的变量中。
var MyComponent = Components[type + "Component"]; return <MyComponent />;
编译为
var MyComponent = Components[type + "Component"]; return React.createElement(MyComponent, {});