如何在 HTML 中设置 React 组件的样式答案

【问题标题】：How to style a React Component in the HTML如何在 HTML 中设置 React 组件的样式
【发布时间】：2016-07-15 06:36:11
【问题描述】：

我正在通过一个数组进行映射，我想根据该元素是否存储在用户配置文件中来设置背景颜色，但是我在设置背景颜色时遇到了问题，并且出现了这个错误。 'Invariant Violation：style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style={{marginRight: spacing + 'em'}}。此 DOM 节点由 AddingHabit'

渲染

      <div>{this.renderHabits().map((habitObject)=>{
              return (<div className="addingHabitPic habitpics" key={habitObject.imageLink} id="picplusdiv"> <img src={habitObject.imageLink} height="288" width="197"/> <div style="background-color:black" className="testdiv">Where is text?</div></div>)
           })}
      </div>

Black 稍后将被一个变量替换，但这只是为了让它工作。我试过 style={{background-color:black}} 错误提示但没有运气。这是使用 React 和 Meteor。

【问题讨论】：

标签： javascript meteor reactjs

【解决方案1】：

您几乎明白了，只是在进行此映射时必须使用稍微不同的语法。您必须使用 camelCase 而不是破折号分隔样式（另外，您写下了black，但这是一个未定义的变量，因此您需要一个字符串'black'）。以下将起作用：

{{ backgroundColor: 'black' }}

您可以将相同的逻辑应用于几乎所有其他 css 样式。

【讨论】：

谢谢老兄你摇滚。我会在 8 分钟内将你标记为正确答案。

【解决方案2】：

Read the docs!

React 文档中涵盖了这种情况。您不能将字符串传递给 styles 属性 - 您必须传递一个对象：

var divStyle = {
    backgroundColor: 'black',
};

并在您的渲染调用中执行<div style = {divStyle}>。

【讨论】：