可以通过编程方式处理Reactjs：之前？

Question

我不得不以编程方式为:before设置div的宽度。

<div className="something" style={someStyle}> </div>

如何定义someStyle以便:before .something``div的宽度可以相应更改？

Answer 1

是的，您可以通过编程方式更改诸如 ::before、::after 之类的伪元素的值。

这是一个技巧。

app.js

const widthVar = 34;
const someStyle = {
     "--width": widthVar
}
<div className="something" style={someStyle}> </div>

style.css

.something:before{
      width: var(--width),
      // remaining code
}

Answer 2

伪元素无法使用内联样式设置样式，如https://stackoverflow.com/a/14141821/368697中所述。您必须使用something选择器在样式表中设置.something:before类名称的样式。这不是React的限制，而是HTML + CSS的设计选择。

如果需要以编程方式更改伪:before元素的宽度，则它可能更适合作为React呈现的常规DOM元素。

Answer 3

@diehell，在ReactJS中将