React.js 中的 setInterval 未应用背景图像样式

Question

使用 AJAX 请求，我正在尝试更改背景图像并设置其样式属性。在通过 setInterval 方法每隔几秒调用一次的函数中，我通过以下方式定义组件的样式和状态：

changeThings() {
    let maxVal = this.props.data.length;
    let ranNum = Math.floor((Math.random() * maxVal));

    let imgVal = (this.props.url[ranNum])? 'url('+ this.props.url[ranNum].url+')':null;
    
    let style = {
      background:imgVal,
      backgroundSize:'cover',
      backgroundPosition:'center',
      bacgkrouhndRepeat:'no-repeate'
    };
    
    this.setState({content:{style:style,
                            section:section,
                            title:title,
                            by:author,
                            dateInfo:updatedDate}});
  }
  
  render()  {
    return ({
      <div>
        //...other components
         (this.state.content.style)? 
          <div id="image" style={this.state.content.style}>:null
        //...other components
      </div>
    })
  }

第一张图片显示时应用了每个背景图片 css 属性。但是，从第二张图片开始，它只会更改图片（背景：url 值），但不会更改其他背景图片属性，例如位置、重复、大小等。

出现这个问题的原因是什么，我该如何解决？

Answer 1

这是我解决问题的方法。首先，我只将 URL 字符串数据保存为 this.state.content 而不是整个 css 样式。当我将样式属性直接设置为 JSX 时，它起作用了。

另外，基本上当DOM定义background-size的样式属性的值时，它会根据当前元素高度和宽度的'snapshot'值来计算值，其中将显示图像。我目前正在制作响应式 Web 应用程序，所以我认为 css 样式在我更改视图时不起作用。

React.js 中的 setInterval 未应用背景图像样式

The background image style is not applied with setInterval in React.js

javascript

css

background-image

setinterval

reactjs