我正在将 ReactJS 与路由、ES6、Babel 和 ESLint 结合使用。
单击时,我想使用类名库添加 CSS 类,但我什至无法使用 document.querySelector
。我的整个应用程序崩溃并打印错误:ReferenceError:文档未定义
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
}
};
有什么想法吗?
最佳答案
您必须将这部分代码移至方法 componentDidMount()
const sideNavToggleButton = document.querySelector('.js-toggle-menu');
sideNavToggleButton.addEventListener('click', () => {
console.info('clicked');
});
因为componentDidMount()
是第一次渲染后调用的方法here 。渲染后你可以进行任何 dom 操作。
关于javascript - 包含脚本时 react "document not defined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39192313/