将字体样式从对象映射映射到 map() 的正确语法答案

【问题标题】：Proper syntax for mapping font style from object map to map()将字体样式从对象映射映射到 map() 的正确语法
【发布时间】：2021-08-23 10:41:24
【问题描述】：

React、JS 和 Material UI

好的，这可能是一个菜鸟问题，但是我在我的 map 函数的 style 属性中的语法到底做错了什么？

字体.jsx

export const fonts = [
  {
    fontName: 'Abril',
    key: 'abril',
    fontFamily: "'Abril Fatface', cursive;",
  },
  {
    fontName: 'Bangers',
    key: 'bangers',
    fontFamily: "'Bangers', cursive;",
  },
  {
    fontName: 'Bebas',
    key: 'bebas',
    fontFamily: "'Bebas Neue', cursive;",
  },
  {
    fontName: 'Bungee',
    key: 'bungee',
    fontFamily: "'Bungee', cursive;",
  },
  {
    fontName: 'Dancing',
    key: 'dancing',
    fontFamily: "'Dancing Script', cursive;",
  },
  {
    fontName: 'Fascinate',
    key: 'fascinate',
    fontFamily: "'Fascinate', cursive;",
  },
  {
    fontName: 'Frijole',
    key: 'frijole',
    fontFamily: "'Frijole', cursive;",
  },
  {
    fontName: 'Girassol',
    key: 'girassol',
    fontFamily: "'Girassol', cursive;",
  },
  {
    fontName: 'Goblin',
    key: 'goblin',
    fontFamily: "'Goblin One', cursive;",
  },
  {
    fontName: 'Graduate',
    key: 'graduate',
    fontFamily: "'Graduate', cursive;",
  },
  {
    fontName: 'Great Vibes',
    key: 'greatVibes',
    fontFamily: "'Great Vibes', cursive;",
  },
  {
    fontName: 'Shadows',
    key: 'shadows',
    fontFamily: "'Shadows Into Light', cursive;",
  },
  {
    fontName: 'Krona',
    key: 'Krona',
    fontFamily: "'Krona One', sans-serif;",
  },
  {
    fontName: 'Lobster',
    key: 'Lobster',
    fontFamily: "'Lobster', cursive;",
  },
  {
    fontName: 'Newsreader',
    key: 'newsreader',
    fontFamily: "'Newsreader', serif;",
  },
  {
    fontName: 'Permanent Marker',
    key: 'permanentMarker',
    fontFamily: "'Permanent Marker', cursive;",
  },
  {
    fontName: 'Righteous',
    key: 'righteous',
    fontFamily: "'Righteous', cursive;",
  },
  { fontName: 'Spartan', key: 'spartan', fontFamily: "'Spartan', sans-serif;" },
];

还有我的 map() 函数：

<Select label="Font" onChange={handleFont} defaultValue="Abril" className={classes.selectEmpty} value={font}>                
  {fonts.map((el, i) => (
     <MenuItem key={el.key} value={el.fontName} style={{ fontFamily: el.fontFamily }}>
        {el.fontName}
     </MenuItem>))}
</Select>

我得到的错误是：警告：样式属性值不应包含分号。试试“fontFamily: 'Spartan', sans-serif”。

我想我知道我需要做什么，但不知道如何去做。对于已经在这方面花费了太多时间的苦苦挣扎的菜鸟有什么帮助吗？

【问题讨论】：

如果警告说您不应该添加分号，您应该尝试从fontFamily 字符串中删除分号。
omg......我觉得自己像个白痴。是的，它做到了。谢谢你让我免于拔头发:)

标签： javascript reactjs material-ui jsx

【解决方案1】：

iz_ 帮助回答了我在 cmets 中的愚蠢问题。谢谢亲。

删除 ;从我的对象做的伎俩

【讨论】：