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属性。但是，从第二张图片开始，它只会更改图片（background：url值），而不会更改其他背景图片属性，例如位置，重复次数，大小等。

此问题的原因是什么，如何解决？

Answer 1

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

此外，基本上，当DOM定义background-size的style属性的值时，它会根据当前显示图像的元素高度和宽度的“快照”值来计算该值。我目前正在制作自适应Web应用程序，因此我认为更改视图时css样式不起作用。

背景图像样式不适用于React.js中的setInterval

1 个答案: