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})`。

作为参考，它称为模板文字。请参阅this MDN doc以获取更多信息。

在React上带有`的花括号

1 个答案: