Material Ui: 动态更改数组中的图标道具

Question

我需要为数组中的许多图标更改属性（颜色、大小）（我使用 mu v4）：

const ICONS_ARRAY: React.ReactNode[] = [
<AlertCircleCheckOutline />,
<AppleSafari />,
<MotionPlay />,
<AppleKeyboardCommand />,
<FileDocumentMultipleOutline />,
<ClipboardArrowLeftOutline />,
<ViewDashboardOutline />,
<CalendarClockOutline />,
<RobotHappyOutline />,
<AccountWrenchOutline />,
<AccountGroupOutline />,
<AccountCogOutline />,
<RunFast />,
<SpeedometerSlow />]

我试试这个（i - 数组中的索引图标）：

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}>ICONS_ARRAY[i]</SvgIcon>
                </Box>
            </MenuItem>,

但是图标没有渲染。如果我在元素上更改 ICONS_ARRAY[i] - 它会像这样工作：

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}><RunFast /></SvgIcon>
                </Box>
            </MenuItem>

我也试过 React.cloneElement，但效果一样。

那么您知道问题可能是什么以及解决方案是什么吗？

Answer 1

我要说一些小事，但只是为了打发时间。
您是否尝试过添加括号“{}”？
像这样...

        <MenuItem>
            <Box>
                <SvgIcon fontSize={'small'}>{ICONS_ARRAY[i]}</SvgIcon>
            </Box>
        </MenuItem>

或者试试这个

    {ICONS_ARRAY.map((icon) => (
      <MenuItem>
        <SvgIcon fontSize={"small"}>{icon}</SvgIcon>
      </MenuItem>
    ))}

Material Ui: 动态更改数组中的图标道具

Material Ui: Change mu icons props in array dinamically

javascript

icons

reactjs

material-ui