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] />