React，动态渲染材质ui图标答案

【问题标题】：React, render material ui icon dynamicallyReact，动态渲染材质ui图标
【发布时间】：2021-04-18 17:18:28
【问题描述】：

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

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

 ...

<Muicon.Visibility />

眼睛图标出现了。

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

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

<Muicon.{userIcon} />

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

谢谢

【问题讨论】：

标签： reactjs react-native material-ui icons

【解决方案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>

这是demo

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

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

并使用它

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

demo

【讨论】：

【解决方案2】：

你可以像下面那样做

const SelectedIcon = Muicon[userIcon];

<SelectedIcon />

【讨论】：