Question

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

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

 ...

<Muicon.Visibility />

随着眼睛图标出现。

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

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

<Muicon.{userIcon} />

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

谢谢

Answer 1

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

Compare-Object

并使用它

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

这是一个demo

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

<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;
};

demo

Answer 2

你可以像下面那样做

const SelectedIcon = Muicon[userIcon];

<SelectedIcon />

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

2 个答案: