如何在React.js的内联CSS中传递props值？

首先注意：React里元素的类名属性要用className代替class，这是React的规范要求。

要把props.ThreadImageUrl传入backgroundImage，你需要把它拼接到url()格式的字符串里，有两种常用写法：

方法1：使用ES6模板字符串（推荐） #

模板字符串用反引号`包裹，变量用${}嵌入，写法更简洁：

function Thread(props) {
  return (
    <div
      className="img"
      style={{ backgroundImage: `url(${props.ThreadImageUrl})` }}
    ></div>
  )
}

方法2：普通字符串拼接 #

用+号把字符串和变量拼接起来：

function Thread(props) {
  return (
    <div
      className="img"
      style={{ backgroundImage: "url(" + props.ThreadImageUrl + ")" }}
    ></div>
  )
}

为什么你之前的写法不行？ #

backgroundImage的值需要是一个符合CSS语法的字符串（比如"url(图片地址)"），你直接写{props.ThreadImageUrl}相当于只传入了地址本身，缺少url()的包裹，所以浏览器无法识别成合法的背景图属性值。

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