反应，动态渲染 material ui 图标

Question

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

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

 ...

<Muicon.Visibility />

随即出现眼睛图标。

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

问题是我不能做类似

的事情

<Muicon.{userIcon} />

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

谢谢

Answer 1

你可以像下面那样做

const SelectedIcon = Muicon[userIcon];

<SelectedIcon />

Answer 2

我会为 return 图标创建一个函数

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>

这是一个demo

如果我想要一种更简洁的方法来执行此操作，我将创建一个单独的组件

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

并使用它

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

demo

反应，动态渲染 material ui 图标

React, render material ui icon dynamically

icons

reactjs

react-native

material-ui