React中style属性报“The `style` prop expects a mapping”错误求助

报错原因 #

报错The style prop expects a mapping from style properties to values, not a string的核心原因是React内联style的语法规则和原生HTML不同：React的style属性仅接受JavaScript对象作为值，对象的键为驼峰格式的CSS属性名，值为对应属性的取值（字符串或数值），不支持原生HTML中字符串形式的style写法。

之前三次修改的错误点 #

• 第一种写法：将完整CSS样式字符串作为对象的值，没有按照键值对拆分样式属性，不符合JS对象格式
• 第二种写法：属性值没有用引号包裹，JS会将url、no-repeat等内容识别为未定义变量，直接触发语法报错
• 第三种写法：将多个CSS属性混写在同一个字符串键中，完全不符合React style的对象结构要求

正确写法 #

写法1：合并background属性（和你原生写法效果完全一致）

<div style={{
  background: "url('images/slider/slider1.jpg') no-repeat fixed center",
  height: "100vh"
}}>

写法2：拆分background相关属性（更易后期维护调整）

<div style={{
  backgroundImage: "url('images/slider/slider1.jpg')",
  backgroundRepeat: "no-repeat",
  backgroundAttachment: "fixed",
  backgroundPosition: "center",
  height: "100vh"
}}>

内容的提问来源于stack exchange，提问作者huy8856