我正在使用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
}
};
知道吗?