当类名被随机化时，如何在Next.js中获取DOM元素

Question

我正在构建一个Next.js应用程序(12.1.0版(，在我的Nav组件中，我试图用获取DOM元素

const nav = document.querySelector('.nav');

这返回一个错误

TypeError: Cannot read properties of null (reading 'classList')

因为这个元素被渲染为

<div class="Nav_nav___cOea"></div>

而不是我在CSS中使用的.nav类。

我使用的是css模块和sass，所以我的css在Nav.module.sass中(加载很好(，但是，正如您在上面看到的，它会用不同的类名呈现。如何获取渲染的元素？或者如何阻止next.js随机化类名？

Answer 1

解决方案是引用querySelector中的类，如下所示：

const nav = document.querySelector(`.${styles.nav}`);

这假设样式是这样导入的：

import styles from '../styles/Nav.module.sass';

这是基于对这个问题的公认回答：如何使用document.querySelector选择CSS模块类？