Javascript 如何在React中动态更改CSS属性的值？

我有一个基于类的组件和定义背景不透明度的

this.props.opacity

，我有一个默认不透明度为0的背景类，我想根据返回数字的

this.props.opacity

更改不透明度

例如：

this.props.opacity // is at 0 but it also changes when I'm on the page 

<div className={backgroundRed ? "background" : ""}> // is the JSX

仅供参考

this.props.opacity

的值范围为0到1，它看起来如下：

0.073892020

---

如何通过访问CSS类的“不透明度”值来动态更改该值？

这取决于CSS最初添加到页面的方式

如果CSS与JavaScript完全分离（例如，它是使用引导HTML文档中的

元素添加到页面的），那么最简单的方法就是忘记修改样式表中的规则集，而只使用内联样式：

const styleRules = { opacity: this.props.opacity };
return (<div className="background" style={styleRules} />);

然后：

<BackgroundDiv opacity={this.props.opacity} />

---

你能做内联样式吗？有没有理由不这样做

<div className="background" style={{opacity: this.props.opacity}} /> // is the JSX

//是JSX吗

您可以直接将html标记作为如下对象样式传递给html

<div className="background" 
     style={{ opacity: this.props.opacity }} 
 />

@tomioion对不起，我弄错了。JSX实际上看起来不像下面的答案是好的。要考虑的另一个选项：@KleoMagaret Ehh。。。我想你需要这样：
CSS在不同的文件中，它被导入到我的组件中，我不认为我不能只使用内联样式，因为我不知道一些CSS属性，例如
-ms overflow style
是否可以工作。@KleoMagaret-然后你只需要设置正确的属性名。我猜
msOverflowStyle
<div className="background" style={{opacity: this.props.opacity}} /> // is the JSX

<div className="background" 
     style={{ opacity: this.props.opacity }} 
 />