背景图像样式不适用于React.js中的setInterval
背景图像样式不适用于React.js中的setInterval
提问于 2019-02-20 00:42:23
使用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值)，而不更改其他背景图像属性，如位置、重复、大小等。
这些问题的原因是什么?我如何解决它？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-20 01:52:16
下面是我修复这个问题的方法。首先，我只将URL string数据保存到this.state.content，而不是整个css样式。当我将style属性直接设置为JSX时，它起作用了。
此外，基本上，当DOM定义了background-size的style属性的值时，它会根据当前元素高度和宽度的“快照”值来计算该值，图像将显示在这些值中。我目前正在制作响应式web应用程序，所以当我更改视图时，我认为css样式不起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54771081
复制相关文章
相似问题
腾讯云开发者
