在 JSON 数组 object map 中反应 JSX

Question

提供了一个 JSON 带有名称的图标数组。 我想要 map JSX 但在 output 中没有显示为 JSX 元素（图标），代码使用 Material-UI 元素和图标：

import * as React from 'react';
import {Box, Paper, Typography} from '@mui/material';
import WorkIcon from '@mui/icons-material/Work';
import Settings from '@mui/icons-material/Settings';
const iconsSet = [
  {
    name: 'WorkIcon',
    icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    icon: () =>(<Settings/>),
  }
];
export default function Icons() {
  return (
    <Box>
      {iconsSet.map(({name,icon})=>(
        <Paper>
          {icon} {/* Nothing Shows  */}
          <Typography>{name}</Typography>
        </Paper>
      ))}
    </Box>
    );
}

链接到 Codesandbox

Answer 1

你必须用首字母大写来命名 JSX 元素，试试 object 键中的Icon ：

const iconsSet = [
  {
    name: 'WorkIcon',
    Icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    Icon: () =>(<Settings/>),
  }
];

然后在map()中的 JSX 中使用它，如下所示：

<Box>
  {iconsSet.map(({name,Icon})=>(
    <Paper>
      <Icon />
      <Typography>{name}</Typography>
    </Paper>
  ))}
</Box>

Answer 2

尝试

import * as React from 'react';
import {Box, Paper, Typography} from '@mui/material';
import WorkIcon from '@mui/icons-material/Work';
import Settings from '@mui/icons-material/Settings';
const iconsSet = [
  {
    name: 'WorkIcon',
    icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    icon: () =>(<Settings/>),
  }
];
export default function Icons() {
  return (
    <Box>
      {iconsSet.map(({name,icon})=>(
        <Paper>
          {icon()} {/* here is the change  */}
          <Typography>{name}</Typography>
        </Paper>
      ))}
    </Box>
    );
}