内联样式不起作用ReactJS

Question

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

错误:

该style道具预计从风格属性值的映射,而不是一个字符串.例如,使用JSX时style = {{marginRight:spacing +'em'}}.这个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}}
>

更新:

我们可以使用模板文字在url中传递变量,如下所示:

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