内联样式不起作用ReactJS

Question

我正在努力学习React。为什么不能在组件内部返回使用样式？

错误：

  

style道具需要从样式属性到值的映射，   不是一个字符串。例如，style = {{marginRight：spacing +'em'}} when   使用JSX。此DOM节点由Home呈现。

<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">

我也尝试了这个：

<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>

或

<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>

非常感谢您对此语法的任何帮助。其他人发布他们改变风格说风格，但似乎也没有。

Answer 1

来自DOC ：

  

在React中，内联样式未指定为字符串。相反，他们   使用一个对象来指定，该对象的键是camelCased版本的   样式名称，其值是样式的值，通常是   字符串。

而不是background-image使用backgroundImage。

例如：

padding-top      --->     paddingTop

padding-left     --->     paddingLeft

margin-right     --->     marginRight

...

  

如何指定内联样式？

我们需要将一个对象传递给style属性，该属性将包含键值对形式的所有值。

像这样：

<div 
    style={{
       backgroundImage: 'url(../images/WinterCalling_2016.jpg)', 
       marginTop: 20}}
>

<强>更新

我们可以使用template literals在url中传递变量，如下所示：

<div style={{backgroundImage: `url(${image1})`}}>

Answer 2

遵循camelcase惯例，因此您必须将background-image更改为backgroundImage。

有关详情，请参阅文档here。

Answer 3

如果您想使用style属性，请提供JavaScript词典对象。但是，background-image的样式键为backgroundImage。

<div 
    className="single_slide" 
    style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>

Answer 4

您是否尝试在引号中包装背景图片？

即

<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>

这对我来说似乎很有用（至少在使用background-color属性进行测试时;我手边没有图像可以测试背景图像）

Answer 5

或者你可以使用'！important'这个....就像“background-color：red！important” 注意：并在页脚中调用你的js。因为当我们在header中调用它时，js会首先做出反应。所以在页脚中调用你的'js'。

<div class="yourclass" style="background-color:red;"  >your div</div>

风格= “背景色：红色;”