代码之家  ›  专栏  ›  技术社区  ›  ronnyrr

当包含脚本时,反应“文档未定义”

  •  2
  • ronnyrr  · 技术社区  · 9 年前

    我正在使用ReactJS和Routing、ES6、Babel和ESLint。 单击时,我想使用类名库添加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
        }
    };
    

    知道吗?

    1 回复  |  直到 9 年前
        1
  •  4
  •   Selim Yildiz    5 年前

    componentDidMount()

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

    是第一次呈现后调用的方法 here 。渲染后,可以进行任何dom操作。