css - 通过函数或变量设置背景图片

Question

我正在尝试根据 React 组件中的各种情况更改 div 的背景图像，但首先我需要弄清楚是否可以通过变量或函数设置背景图像，但事实并非如此似乎有可能。例如，对于一个变量，像这样的伪代码似乎不起作用

render: function(){
var myvariable = "url('http://localhost:8080/assets/myimage.jpg')"
return (
    <div style={{ "backgroundImage": { myvariable }, "width": "300px"}}</div>
     )
}

我还尝试从内联样式调用一个函数，但编译器拒绝 . in this.setBackgroundImage

 setBackgroundImage: function(){
     return "url('http://localhost:8080/assets/myimage.jpg')"
 },
 render: function(){

    return (
        <div style={{ "backgroundImage": { this.setBackgroundImage }, "width": "300px"}}</div>
         )
    }

问题:是否可以在 React 的内联样式中调用函数或使用变量，如果不能，我如何实现我正在尝试做的事情(即旋转 div 的背景图像)？

请注意，div 必须具有其他样式(宽度、高度等)，而不仅仅是背景图像

Answer 1

基本上您需要做的是编写如下样式:

var divStyle = {
  backgroundImage: 'url(' + imgUrl + ')',
  width: '300px'
};

然后内联使用它们:

return (
  <div style={divStyle}></div>
)

React Inline Styles