如何在 React/JSX 中动态渲染组件？

React/JSX 中的动态组件渲染

React 的 JSX 允许声明式组件渲染，但有时开发者可能需要基于他们的类型。

问题

尝试使用下面的代码片段动态渲染组件时，会发生错误：

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

出现错误是因为代码使用数组语法，而 JSX 需要 XML 。其他解决方案，例如为每个组件创建一个方法，都不够优雅。

解决方案

React 文档现在提供了动态组件渲染的官方解决方案：

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

此代码编译为：

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

变量 MyComponent 存储组件类并且是大写的。然后 React.createElement 函数使用此类来创建组件元素。

以上是如何在 React/JSX 中动态渲染组件？的详细内容。更多信息请关注PHP中文网其他相关文章！