在React上帶有`的花括號

Question

我在渲染方面有一個小問題。

const Image = React.createClass({
getInitialState(){
    return{
        imgUrl: 'cat.jpg'
    }
},

handleChange(e){
        e.target.classList.toggle('active')
},

render(){
    return (

        <div className="handler"

           style={{backgroundImage: 'url(' + this.state.imgUrl + ')'}}
           onClick={this.handleChange}>

        </div>
    )
}
})

ReactDOM.render(
    <Image />,
    document.getElementById('home')
)

現在，我以這種方式為我的div添加樣式：

style={{backgroundImage: 'url(' + this.state.imgUrl + ')'}}

當我嘗試以這種方式編寫時：

`url({this.state.imgUrl})`

只會添加{}的％7D和％7B符號

什么是正確的書寫方式以及如何避免使用“ +”

希望有人可以幫助您解決這個簡單的問題:)

Answer 1

它應該是`url(${this.state.imgUrl})` 。

供您參考，它稱為模板文字 。 請參閱此MDN文檔以獲取更多信息。