React：`style` 属性需要从样式属性到值的映射，而不是字符串 [重复]答案

【问题标题】：React: The `style` prop expects a mapping from style properties to values, not a string [duplicate]React：`style` 属性需要从样式属性到值的映射，而不是字符串 [重复]
【发布时间】：2020-01-07 06:38:27
【问题描述】：

我有以下 HTML 可以使用 React 呈现：

      <a
        style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:8px;font-weight:bold;line-height:1;display:inline-block;border-radius:3px'
        href= //...
        target='_blank'
        rel='noopener noreferrer'
        className='credit-box-abs'
      >
        <span style='display:inline-block;padding:2px 3px;font-size:11px'>
          <i className='fas fa-camera-retro'></i>
        </span>
        <span style='display:inline-block;padding:2px 3px'>Photographer name</span>
      </a>

当我尝试编译时，我收到关于每个 style 的以下警告：

Style prop value must be an object

还有错误：

The `style` prop expects a mapping from style properties to values, not a string.

编译器以及在线建议的解决方案指出：

<div style={{ styleAttribute: 'whatever', ... }}>

所以我尝试了以下方法：

      <a
        style={{background-color:'black';color:'white';text-decoration:'none';padding:'4px 6px';font-family:'-apple-system , BlinkMacSystemFont, \"San Francisco\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, \"Segoe UI\", Arial, sans-serif ';font-size:'8px';font-weight:'bold';line-height:'1';display:'inline-block';border-radius:'3px'}}
        href= //...
        target='_blank'
        rel='noopener noreferrer'
        className='credit-box-abs'
      >
        <span style='display:inline-block;padding:2px 3px;font-size:11px'>
          <i className='fas fa-camera-retro'></i>
        </span>
        <span style='display:inline-block;padding:2px 3px'>Photographer name</span>
      </a>

但是语法不正确。我是否应该将每个属性的所有值都包含在'' 中？特别是，background-color: 'black' 的语法在我的结束 </a> 标记下给出了红线。

【问题讨论】：

标签： javascript html reactjs syntax react-props

【解决方案1】：

background-color是一个css属性，同样的JS属性名称是backgroundColor，所以如果你尝试{backgroundColor: 'black'}，应该可以。

有关更多 CSS 及其各自的 JS 属性，请查看Common CSS Properties Reference

【讨论】：