内联样式在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)}}>

任何有关这个语法的帮助都将不胜感激。其他人发表过，他们将样式更改为styles，但似乎也没有起作用。

- David Brierton

Answer 1

来自文档:

在React中，内联样式不是以字符串的形式指定的。相反，它们使用一个对象来指定，该对象的键是驼峰命名法版本的样式名称，值是样式的值，通常是一个字符串。

所以不要使用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})`}}>

- Mayank Shukla

---

访问者注意：样式声明中的拼错可能导致“style”属性在呈现时甚至不会出现...这可能会导致它看起来“style”没有起作用... - random_user_name

@cale_b，你能指出错别字吗？我会纠正它。 - Mayank Shukla

抱歉 - 我不是在说你有错别字 - 我是在说如果你有错别字，它就无法工作。我发现这个问答是因为样式根本没有出现，后来发现我的代码中有一个错别字：url(${image1}); - 多余的分号使其成为无效值，由于只有一个样式属性，所以style属性甚至没有出现在元素上.... - random_user_name

Answer 2

React 遵循驼峰命名法，因此您需要将 background-image 改为 backgroundImage。

更多信息请参见 文档。

- Mμ.

---

"url" 接受一个字符串，所以我认为那样做行不通。你可以使用字符串模板，就像这篇文章中的模板一样：https://dev59.com/YlkT5IYBdhLWcg3wAK9E - Mμ.

为了更加清晰明了 - javascript 遵循驼峰命名法，而 React 是 javascript 的一种，因此它也遵循驼峰命名法... - random_user_name

Answer 3

如果您想使用style属性，请提供一个JavaScript字典对象。然而，background-image的style键是backgroundImage。

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

- Ivor Zhou

---

@DavidBrierton 是的，你可以这样做。根据你使用的 webpack 资源加载器不同，你可能会得到一个 base64 数据的 URL 或者一个静态文件的 URL。 - Ivor Zhou

@DavidBrierton，你需要像Mayank Shukla的答案所示那样使用模板字面量。 - Ivor Zhou

Answer 4

你尝试过用引号包裹 background-image 吗？

例如：

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

这对我似乎有效（至少在测试背景颜色属性时是这样；我手头没有图像可用于测试背景图像）

- Sebastian Mobo

Answer 5

或者你可以在这个属性后面加上'!important'，像这样："background-color:red!important"。 注意：把你的js调用放在页脚。因为有时候当我们在页眉中调用js时，js会先执行。所以把你的'js'调用放在页脚。

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

- webtrackstudio

---

你想表达的方式不太好。而且我有印象它并没有为这个问题增加新的内容。 - and-bri