包含脚本时反应“未定义文档”答案

【问题标题】：React "document not defined" when including script包含脚本时反应“未定义文档”
【发布时间】：2020-10-23 21:30:42
【问题描述】：

我正在使用带有路由、ES6、Babel 和 ESLint 的 ReactJS。单击时，我想使用类名库添加一个 CSS 类，但我什至不能使用 document.querySelector。我的整个应用程序崩溃并打印错误：ReferenceError: document is not defined

import React from 'react';
import { connect } from 'react-redux';

export default class Nav extends React.Component {
    constructor(props) {
        super(props);

        const sideNavToggleButton = document.querySelector('.js-toggle-menu');
        sideNavToggleButton.addEventListener('click', () => {
            console.info('clicked');
        });
    }

    render() {
        return (
            <header>
                <button role="tab" className="header__menu js-toggle-menu">Toggle nav menu</button>
                <h1 className="header__title">App Shell</h1>
            </header>
        );
    }
}

经过一番研究，我发现可能是我的 ESLint 设置缺少某些环境，但添加浏览器后，应用程序仍然无法正常工作。

module.exports = {
    'parser': 'babel-eslint',
    'plugins': [
        'react'
    ],
    'rules': {
        'indent': [2, 'tab'],
        'max-len': 0,
        'no-console': [2, { allow: ['info', 'error']}],
        'no-param-reassign': 0,
        'react/jsx-indent': [2, 'tab'],
        'react/jsx-indent-props': [2, 'tab'],
        'no-new': 0
    },
    'env': {
        'browser': true,
        'node': true
    }
};

有什么想法吗？

【问题讨论】：

标签： javascript reactjs document eslint

【解决方案1】：

您必须将这部分代码移动到方法componentDidMount()

const sideNavToggleButton = document.querySelector('.js-toggle-menu');
sideNavToggleButton.addEventListener('click', () => {
    console.info('clicked');
});

因为componentDidMount()是第一次渲染here后调用的方法。渲染后，您可以进行任何 dom 操作。

【讨论】：

是的，很明显
请将其作为可接受的答案，以便对其他人有所帮助。