如何从scss styles中的jsx获取计算出的伪？

Question

这是我的情况：我想获得计算的伪道具 - 从 jsx 到 scss 的内容。

this.state = { content: 'my after pseudo content' }

内容将在进度中更改。

这是我的渲染主体：

return <label className={cls('MyTestComponent')}>my test label</label>

这是我的 scss 文件

// MyTestComponent.scss
.MyTestComponent { &:after {
   content: ''
}}

我想要的是从 state 到 scss 文件中计算出 ':after' 内容。

我正在使用 scss，不想导入样式组件或其他第三方 package。

做这个的最好方式是什么？ 提前感谢任何可以解决此问题的人:)

Answer 1

您可以将数据属性与 css attr结合使用，如下所示：

return <label 
  className={cls('MyTestComponent')} 
  data-content={this.state.content}
>
    my test label
</label>

.MyTestComponent { &:after {
   content: attr(data-content);
}}