如何在 class 名称随机化时获取 Next.js 中的 DOM 元素

Question

我正在构建一个 Next.js 应用程序 (v 12.1.0)，在我的 Nav 组件中，我试图用

获取一个 DOM 元素

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

这returns一个错误

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

因为此元素呈现为

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

而不是我在 CSS.

中使用的 .nav class

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

Answer 1

解决方法是像这样在querySelector中引用class：

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

假设样式是这样导入的：

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

这是基于对这个问题的公认回答：

How to grab a DOM element in Next.js when class name is randomized