React "文档未定义;当包含脚本时
React "document not defined" when including script
我使用ReactJS与路由,ES6, Babel和ESLint。点击我想添加一个CSS类使用classnames库,但我甚至不能使用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
}
};
任何想法?
您必须将这部分代码移动到方法componentDidMount()
const sideNavToggleButton = document.querySelector('.js-toggle-menu');
sideNavToggleButton.addEventListener('click', () => {
console.info('clicked');
});
因为componentDidMount()
是在这里第一次呈现之后调用的方法。呈现后,您可以进行任何dom操作。
相关文章:
- 在包含脚本的地方注入HTML
- 如何在开发和生产中动态包含脚本
- "未终止的模板文字“;当文字包含脚本标记时出现语法错误
- AngularJS - 在所有指令呈现后包含<脚本>
- 添加一个包含<脚本>的 dom 元素
- 不能在 AppFog Node App 上包含脚本/css
- 如何在浏览器 JS 控制台中包含脚本时覆盖内容安全策略
- Azure 和 Node.js 和 JSDOM 计划任务 - 打开包含脚本的网页
- 解析包含脚本标记和 document.write 的 HTML 字符串
- 重新加载仅包含脚本的 DIV,然后执行脚本
- jQueryAjax包含脚本,即使页面是空的
- 通过JavaScript在页眉或HTML中动态包含脚本元素
- Firefox扩展在main.js文件中包含脚本
- 如何在document.write中包含脚本
- javascript正则表达式从包含脚本标记的字符串中获取url
- EJS在页面布局的开始/结束处包含脚本
- 将包含脚本的动态字符串插入HTML并动态执行它
- 解决在angular模板中包含脚本标签导致“同步XMLHttpRequest..”的问题;错误感觉很脏
- React "文档未定义;当包含脚本时
- 如何在indesign中要求或包含脚本