React将道具传递给模板文字中的背景URL

Question

我正在学习React，而且我遇到了一些我无法解决的问题。在我想要渲染背景的组件中，我有：

<BgBackground style={{background: 'url( {this.props.bg} )' }} />

它接收来自另一个组件的道具：

<BgImage bg="about" />

我错误地写出了我的模板文字（或插值？），我知道。我尝试过以下所有内容：

{{backgroundImage: `url( "${this.props.bg}" )` }} />  

我不能让它发挥作用，我做错了什么？谢谢你的帮助！

（包含后面的抽搐，它们不会在StackO中渲染）

Answer 1

删除模板文字中的""，``中的整个部分将被视为字符串，${}将被替换为值。

像这样写：

{{backgroundImage: `url(${this.props.bg})`}}

参考：Template Literals

<强>更新

这里是一个字符串（甚至不是一个合适的图像路径），在这个组件中导入并传递它：

import about from 'path';

<BgImage bg={about" />