React样式修改背景失效

背景介绍

点击后，将不透明的按钮修改为渐进透明的按钮。代码如下：
点击前：

let style = this.props.style;
style["background"] = "rgba(250,103,37,1)";
//...
return (
<div style={this.style}>立即下载</div>
);

点击后：

let style = this.props.style;
let progStr= Math.floor(progress*100)+"%";
style["background"] = `linear-gradient(to right,${this.backColor} ${progStr}, rgba(39,42,38,0.1) 0%);`;
//...
return (
<div style={this.style}>已下载{progStr}</div>
);

出现的问题：修改style对象后，背景色没有进行刷新，还是不透明的橙色。

问题分析

1、style对象修改，react采用的是对象引用地址比较，对于它而言，样式没有修改，所以不会刷新。采用深拷贝解决。
2、采用1后，style对象是改变了，但是显示时，渐进透明下还有之前设置不透明的橙色，相当于了

background：rgba(250,103,37,1) linear-gradient(to right,rgba(250,103,37,1) 40%, rgba(39,42,38,0.1) 0%);

其实显示的内联样式是

background：linear-gradient(to right,rgba(250,103,37,1) 40%, rgba(39,42,38,0.1) 0%);

可能是我浏览器内核的原因，在开发者工具上，去除background在勾上就可以正常显示了。对于它而言，我只修改background-image，没有改动background-color，就不重绘了。
采用下面这种方法修改样式就可以解决：

let style = clone(this.props.style);style["backgroundColor"] = this.backColor;style["backgroundImage"] = `linear-gradient(to right,${this.backColor} ${progStr}, rgba(39,42,38,0.1) 0%);`;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！