スクリプトを含むときに「ドキュメントが定義されていません」と反応する

Question

私はRouting、ES6、Babel、ESLintでReactJSを使用しています。 クリックすると、classnamesライブラリを使用してCSSクラスを追加しますが、document.querySelectorも使用できません。私はそれが私のESLintの設定は、いくつかの環境が欠けますが、ブラウザを追加した後、アプリケーションがまだ破壊されたかもしれませんがわかったいくつかの研究の後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> 
     ); 
    } 
} 

：私の全体のアプリケーションがクラッシュし、エラーを出力します。

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 
    } 
}; 

Answer 1

あなたはcomponentDidMount（）は最初はhereをレンダリングした後に呼び出されるメソッドであるため、メソッドcomponentDidMount（）

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

にあなたのコードのこの部分を移動する必要があります。レンダリング後、任意のdom操作を行うことができます。