JSX通过字符串获取Component

Question

这是很难解释的。

我从组件库中获得几个Icons ，如下所示：

import { Icons } from my-component-library import { Icons } from '。

假设我有3个图标，分别为IconPlus ， IconMinus和IconEquals 。

我可以轻松显示IconEquals以及一个描述道具，如下所示：

const IconContainer = ({ description ) => (
    <div>
        {description}
        <Icons.IconEquals />
    </div>
)

这很好。 现在，我正在尝试实现一个模板，在该模板中，我可以将另一个prop icon传递给此容器，该容器将显示相应的图标。

例如。 如果icon是IconPlus

然后，应呈现以下内容：

<div>
    {description}
    <Icons.IconEquals />
</div>

我该如何实现我的JSX ？

这基本上就是我所拥有的：

import { Icons } from 'my-component-library'

const IconContainer = ({ description, icon }) => (
    <div>
        {description}
        <Icons.{icon} /> // <---- Obviously that doesn't work
        // ^^^^ But I need something like this
    </div>
);

是否有可能做到这一点？

Answer 1

您可以这样使用：

<Icons[icon] />