通过直接访问DOM

Question

我有一个使用CSS-Modules的组件，通过babel-plugin-react-css-modules插件。

在组件生命周期的某些时刻，我希望能够通过直接访问DOM来计算它的新维度。

在我的SCSS样式表中，我有一个名为.full-width的类，我想将其应用于组件的DOM元素，以便进行计算，然后再将其删除。

现在，由于添加类并在一小段时间后删除它不会影响组件或其状态，我想通过直接访问DOM来添加和删除类，而不是通过以某种方式关联它的箍组件的state。

如果我this.DOMReference.classList.add('full-width');，则会向其添加类full-width，但我想添加该类的模块化版本，因为如果我执行了styleName="full-width"（适用于示例Component__full-width___Pjd10）

如果没有.full-width全局声明，有没有办法做到这一点？

我可以使用react-css-modules执行此操作吗？

Answer 1

好吧，我意识到我可以在变量下导入样式，而不是匿名，例如

import styles from './styles.scss'代替import './styles.scss'，然后我可以将其用作

this.DOMReference.classList.add(styles['full-width']);

我也不必使用styleName="styles.someClass"，我可以简单地使用styleName="someClass"（只要导入一个样式表文件，否则你需要像以前那样做）

我想听听更好的方法。