Réagissez "document non défini" lors de l'inclusion du script

Question

J'utilise ReactJS avec Routing, ES6, Babel et ESLint. Au clic, je veux ajouter une classe CSS en utilisant la bibliothèque des noms de classe, mais je ne peux même pas utiliser le document.querySelector. Tout mon application se bloque et imprime l'erreur: 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> 
     ); 
    } 
} 

Après quelques recherches, j'ai découvert qu'il pourrait être mes paramètres ESLint manquant certains environnements, mais après avoir ajouté navigateur l'application est encore casser.

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

Une idée?

Answer 1

Vous devez déplacer cette partie de votre code à la méthode componentDidMount()

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

Parce que componentDidMount() est la méthode qui est appelée après la première rendu here. Après le rendu, vous pouvez faire n'importe quelle manipulation dom.