如何在 React/JSX 中动态渲染组件？-js教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-11-15 14:12:02

原创

439 人浏览过

How to Dynamically Render Components in React/JSX?

React/JSX 中的动态组件渲染

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

问题

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

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

登录后复制

The出现错误是因为代码使用数组语法，而 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中文网其他相关文章！