反应，动态渲染材质 ui 图标

Question

我需要一些帮助来解决以下问题。我正在使用 Material ui 图标，并且该项目的设置方式是，当我想使用图标时，我必须这样做：

import {Muicon } from '@/lib/material';

 ...

<Muicon.Visibility />

随着眼睛图标出现。

现在我想要做的是：有一个屏幕，用户可以在其中选择要在其他屏幕中显示的图标，例如，用户写“可见性”（只是一个字符串），然后使用 <Muicon.Visibility /> 组件必须显示在另一个屏幕中。

问题是我不能做类似的事情

<Muicon.{userIcon} />

有人能告诉我怎么做吗？我必须使用用户输入的字符串创建一个组件，有没有办法做到这一点？或者我需要不同的方法？

谢谢

Answer 1

我会创建一个函数来返回图标

const GenerateIcon = (variation, props = {}) => {
    const IconName = Muicon[variation];
    return <IconName {...props} />;
};

并使用它

<div>
  <p>{GenerateIcon("Visibility")}</p>
  <p>{GenerateIcon("VisibilityOff")}</p>
  <p>{GenerateIcon("AddAPhoto", {color: "secondary"})}</p>
</div>

这是一个演示

如果我想要更简洁的方式来做到这一点，我将创建一个单独的组件

const Icon = ({ name, ...rest }) => {
    const IconComponent = Muicon[name];
    return IconComponent ? <IconComponent {...rest} /> : null;
};

并使用它

<Icon name="Visibility" />
<Icon name="VisibilityOff" />
...

演示