Javascript 使用React动态插入SCSS类

关于使用React动态插入SASS类的最佳实践的基本问题

我有一个带有两个道具的React组件：

componentId

，和

color

。组件呈现为列表。每次渲染它们时，我希望它们将组件的CSS背景色设置为this.props.backgroundColor

我知道我可以用内联样式来实现这一点，但由于难以维护它，人们通常不赞成这样做。我目前有一个包含许多类的SCSS文件

如何动态附加一个SCSS类，该类的类名为this.props.componentId，颜色为this.props.backgroundColor

例如，如果组件将this.props作为

componentId: list-item-123456789
color: #00FFFF

如何从react组件将以下SCSS类附加到style.SCSS文件中

.list-item-123456789 {
    background-color: #00FFFF;
}

---

这是样式化组件的工作吗？这是一种内联样式可能是工作最佳实践的情况吗？仅仅从我所读到的内容来看，这样做让我感觉很恶心，但我不确定如何实现上述解决方案。

正如您所猜测的，这将是样式化组件或内联样式的工作。当您的React应用程序编译时，所有这些SASS文件都会通过Webpack转换为标准CSS（我猜是这样）。因此，一旦您的应用程序被绑定和部署，您的SASS文件将是多余的。

内联样式与仅在元素上设置一个类不同，如果您要实际手动创建所有这些样式类，则可以这样做

照办

<li className={{this.props.componentId}}>Some Item </li>

某些项

---

确保您的SASS类是全局的或在该组件的范围内。

Ah这很有意义。我猜是我忘了SASS无论如何都会被编译成CSS。由于背景颜色是在单个组件级别动态加载的，因此这可能是内联样式实际适用的情况之一。我知道我可以这样设置类名。我的问题是我是否可以通过编程而不是手动设置样式类。@nao这是通过编程实现的。手动设置className=“myClass”。如果您的意思是以编程方式设置“样式”，而不是生成所有这些不同的类，那么“是”内联样式将是最简单的。按照上面的解释，您试图同时完成这两件事，您需要决定创建类并附加它们，或者在组件内联或使用样式化组件构建样式。