javascript - React 将 props 传递给模板文字中的背景 url

Question

我正在学习 React，但遇到了一个似乎无法修复的障碍。在我想要渲染背景的组件中，我有:

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

它从另一个组件获取它的 props:

<BgImage bg="about" />

我知道，我错误地写出了我的模板文字(或插值？)。我已经尝试过一切，例如:

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

我无法让它工作，我做错了什么？感谢您的帮助!

(包括后部抽动，它们不会在 StackO 中渲染)

Answer 1

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

这样写:

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

引用:Template Literals

更新:

这里的 about 是一个字符串(甚至不是正确的图像路径)，在这个组件中导入 about 并像这样传递它:

import about from 'path';

<BgImage bg={about" />