内联样式不起作用ReactJS

  • Z时代
  • 2024-01-10
  • 分类：问答

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

错误：

该style道具期望从样式属性到值而不是字符串的映射。例如，使用JSX时，样式=

{{marginRight：空格+’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)}}>

此语法的任何帮助将不胜感激。其他人则张贴他们将样式更改为说样式，但这似乎也不起作用。

回答：

：

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

以上是 内联样式不起作用ReactJS 的全部内容， 来源链接： utcz.com/qa/415156.html

回到顶部