javascript - 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 样式属性的值时，它会根据图像将显示的元素高度和宽度的当前“快照”值计算该值。我目前正在制作响应式 Web 应用程序，所以我认为更改 View 时 css 样式不起作用。