内联样式不起作用 ReactJS答案

【问题标题】：Inline style is not working ReactJS内联样式不起作用 ReactJS
【发布时间】：2017-10-21 13:50:08
【问题描述】：

我正在尝试学习 React。为什么不能在组件内部的返回中使用样式？

错误：

style 属性需要从样式属性到值的映射，不是字符串。例如 style={{marginRight: spacing + 'em'}} 当使用 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)}}>

任何有关此语法的帮助将不胜感激。其他人发布他们更改样式以说样式，但这似乎也不起作用。

【问题讨论】：

标签： reactjs

【解决方案1】：

来自DOC：

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

所以不要使用background-image，而是使用backgroundImage。

例如：

padding-top      --->     paddingTop

padding-left     --->     paddingLeft

margin-right     --->     marginRight

...

如何指定内联样式？

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

像这样：

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

更新：

我们可以使用template literals在url中传递一个变量，像这样：

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

【讨论】：

访问者注意事项 - 样式声明中的拼写错误会导致 style 属性甚至不会出现在渲染中...这可能会导致它出现 style 不起作用...跨度>
@cale_b 你能指出错字吗？会纠正的。
抱歉 - 不是说 you 有错别字 - 是说如果你有有错别字，它不会起作用。我发现这个问答是因为样式根本没有出现，并发现我的代码中有错字：url(${image1}); - 杂散的分号使其成为无效值，并且由于只有一个样式属性，style 属性甚至没有出现在元素上......

【解决方案2】：

React 遵循驼峰式约定，因此您必须将 background-image 更改为 backgroundImage。

更多信息，文档是here。

【讨论】：

url 接受一个字符串，所以我认为这行不通。您可以改用字符串模板，例如这篇文章中的模板：stackoverflow.com/questions/39195687/…
更清楚一点 - javascript 遵循驼峰式约定，而 React 是 javascript，因此它又遵循驼峰式约定....

【解决方案3】：

如果你想使用 style 属性，请提供一个 JavaScript 字典对象。但是，background-image 的样式键是 backgroundImage。

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

【讨论】：

【解决方案4】：

您是否尝试将背景图像用引号括起来？

即

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

这似乎对我有用（至少，在使用 background-color 属性进行测试时；我手头没有用于测试背景图像的图像）

【讨论】：

【解决方案5】：

或者你可以使用 '!important' 与这个 ....like "background-color:red!important" 注意：并在页脚中调用您的 js。因为有时 js 会在我们在页眉中调用时首先做出反应。所以在页脚中调用您的“js”。

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

style="background-color:red;"

【讨论】：