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 放入字符串中，为什么还要使用它？

【参考方案1】：

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

【讨论】：

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