时间戳

首页 > 解决方案 > 将字体样式从对象映射映射到 map() 的正确语法

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

问题描述

React、JS 和 Material UI

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

字体.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”。

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

标签： javascriptreactjsmaterial-uijsx

解决方案

iz_ 在评论中帮助回答了我的愚蠢问题。谢谢芽。

删除 ; 从我的物品中成功了

推荐阅读