установить фоновое изображение через функцию или переменную

Question

Я пытаюсь изменить фоновое изображение div в зависимости от различных обстоятельств в компоненте React, но сначала мне нужно выяснить, можно ли установить фоновое изображение через переменную или функции, и это не представляется возможным. Например, с переменным, не кажется, что-то вроде этого псевдо-кода для работы

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

Я также пытался вызвать функцию из стилей инлайн, но компилятор возражал носок . в 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