IT技术 - 内联样式不起作用 ReactJS - 吾爱随笔录

IT技术 reactjs

2021-05-19 11:54:03

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

错误：

该styleprops预计从风格属性值的映射，而不是一个字符串。例如，在使用 JSX 时，style={{marginRight: spatial + '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)}}>

对此语法的任何帮助将不胜感激。其他人张贴他们改变风格说风格，但这似乎也不起作用。

4个回答

来自DOC：

在 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})`}}>

react遵循驼峰约定，所以你必须改变background-image来backgroundImage代替。

有关更多信息，文档在此处。

如果要使用 style 属性，请提供 JavaScript 字典对象。但是，样式键background-image是backgroundImage.

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

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

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

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

其它你可能感兴趣的问题