React/JSX动态组件名称 – 开发百科-程序代码问答平台

我正在尝试根据组件的类型动态渲染组件

例如：

var type=“Example”；
var ComponentName=类型+“组件”；
返回&lt；组件名称/&gt；；
//退货&lt；示例组件/&gt；而不是&lt；示例组件/&gt；

我尝试了这里提出的解决方案React/JSX动态组件名称

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

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

newExampleComponent（）{
返回&lt；示例组件/&gt；；
}
新成员（类型）{
返回此[“新”+类型+“组件”]（）；
}

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

我很乐意接受建议

&lt；MyComponent/&gt编译为React.createElement（MyComponent，{}），它需要字符串（HTML标记）或函数（ReactClass）作为第一个参数

您可以将组件类存储在一个名称以大写字母开头的变量中。请参阅HTML标记与React组件

var MyComponent=Components[type+“Component”]；
返回&lt；MyComponent/&gt；；

编译成

var MyComponent=Components[type+“Component”]；
返回React.createElement（MyComponent，{}）；