React/JSX动态组件名称

Question

我希望能够根据一个字符串渲染一个组件。本质上，我希望找到JSX相当于JavaScript的动态函数名功能（parent["childMethod"]）。

如果我有一个字符串，例如"<MyComponent />"，那么我如何将其转换成JSX并渲染？

- Matt Fordham

---

如果您已经将JSX放入字符串中，为什么还需要使用JSX呢？ - David Hellsing

你的标题和第二段呈现了不同的问题。如果你在一个字符串中有一个特定的组件名称，就像你的标题所暗示的那样，你可以（假设你的构建管道不会缩小或以其他方式更改组件名称）使用React.createElement从中创建一个元素，将该元素存储在变量中，并在一些JSX中使用花括号包含该元素。但是，如果你有一个元素的整个JSX代码在一个字符串中，比如"<MyComponent />，你需要另一种我不知道的解决方案。 - Mark Amery

这个回答解决了你的问题吗？React JSX中的动态标签名 - ATYB

Answer 1

JSX只是函数调用的一种美好语法，因此您需要实际函数才能使用组件。如果您有一个包含React组件的对象，则可以基于字符串属性呈现组件。例如，如果您有一个名为MyComponents的对象（JSX必须大写），并且该对象具有React组件，如MyComponents.SomeInput = React.CreateClass(...) 。然后，您可以在JSX中使用<MyComponents.SomeInput />。

- Scott

---

我遇到了同样的问题，但是var ContentBlocks = { info : require('./Infoblock'), portrait : require('./Portraitblock') };和<ContentBlocks['info']>会抛出错误。 - Jörn

我刚刚检查了一下，你是正确的，你可以使用<ContentBlocks.info>或者用var MyComponent = MyComponents['info'];和 <MyComponent>，如果在编写代码时不知道键名的话。 - Scott