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

如何在 React 和 JSX 中渲染动态组件名称？

Barbara Streisand

发布： 2024-11-17 13:52:02

原创

246 人浏览过

How to Render Dynamic Component Names in React and JSX?

React 和 JSX 中的动态组件名称

在 React 中，动态组件渲染允许您在运行时根据组件的类型创建组件。为了说明这一点，请考虑以下示例：

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />

登录后复制

React/JSX 动态组件名称线程中建议的早期解决方案由于语法差异而导致编译错误。作为替代方案，可以为每个组件创建一个单独的方法：

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

登录后复制

但是，这种方法需要为每个组件创建一个新方法，这可能很麻烦。

幸运的是，有一个更优雅的解决方案是将组件类型作为字符串传递给 React.createElement() 函数。该函数使用提供的类型呈现组件。例如：

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

登录后复制

此代码编译为：

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

登录后复制

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