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

Question

我需要为数组中的许多图标更改道具(颜色，大小)(我使用mu v4):

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

我尝试这个(I - index icon in array):

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