Question

我正在通过一个数组进行映射，我想根据该元素是否存储在用户配置文件中来设置背景颜色，但是我在设置背景颜色时遇到了问题而且我收到了这个错误。 '不变违规：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 with Meteor。

Answer 1

除了在执行此映射时必须使用稍微不同的语法之外，您几乎得到了它。您必须使用camelCase而不是短划线样式（也是，您写下了black，但这是一个未定义的变量，因此您需要一个字符串'black'）。以下方法可行：

{{ backgroundColor: 'black' }}

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

Answer 2

Read the docs!

React文档中介绍了这种情况。您无法将字符串传递给styles道具 - 您必须传入对象：

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

并在渲染通话中执行<div style = {divStyle}>。

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

2 个答案: