React/JSX 动态组件名称

Posted 2023-02-21

【中文标题】React/JSX 动态组件名称

【英文标题】：React/JSX dynamic component names

【发布时间】：2015-05-04 17:35:49

【问题描述】：

我正在寻找基于字符串呈现组件。本质上，我希望找到与 javascript 的动态函数命名能力 (parent["childMethod"]) 等效的 JSX。

那么，如果我有一个字符串，比如"<MyComponent />"，我该如何转成JSX并渲染呢？

【问题讨论】：

如果已经将 JSX 放入字符串中，为什么还要使用它？

你的标题和你的第二段存在不同的问题。如果您在字符串中特别有一个 component name，正如您的标题所暗示的那样，您可以（假设您的构建管道不会缩小或以其他方式更改组件名称）创建一个 element 使用 React.createElement 从中获取，将该元素存储在一个变量中，并使用花括号将该元素包含在某些 JSX 中。但是，如果您拥有字符串中某个元素的完整 JSX 代码，例如 "<MyComponent />，那么您需要另一个我不知道的解决方案。

【参考方案1】：

JSX 只是一个很好的函数调用语法，所以你需要有实际的函数才能使用组件。如果你有一个包含 React 组件的对象，那么你可以基于一个字符串属性来渲染一个组件。例如，如果您有一个名为 MyComponents 的对象（对于 JSX 必须是大写），并且该对象具有像 MyComponents.SomeInput = React.CreateClass(...) 这样的 React 组件。然后你可以在你的 JSX 中使用<MyComponents.SomeInput />。

【讨论】：

我也遇到了同样的问题，但是var ContentBlocks = info : require('./Infoblock'), portrait : require('./Portraitblock') ; 和<ContentBlocks['info']> 抛出了一个错误