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

Question

我有一个基于类的组件和 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

的CSS:

.background {
  background: red;
  opacity: 1; // How do I make this value change based on this.props.opacity
}

仅供引用 this.props.opacity具有从 0 到 1 的值，它看起来像这样: 0.073892020
如何通过访问我的 CSS 类的不透明度值来动态更改它？

Answer 1

直接您可以像这样将对象样式传递给 html 标签

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