#reactjs #react-hot-loader
#reactjs #react-hot-loader
Вопрос:
это мой код компонента Header.jsx .. можете ли вы указать, где ошибка? я обыскал весь Интернет для этого, но не смог найти никакого решения. и это касается не только компонента заголовка, это происходит для каждого отредактированного компонента. если вы редактируете компонент в первый раз, он работает нормально и выдает только одну информацию об обновлении в журнале консоли .. но если вы вносите другое изменение, оно становится сумасшедшим и бесконечным, и мой браузер вылетает.
import React from 'react';
import ReactDOM from 'react-dom';
import { Link, Router } from "react-router";
import Request from 'superagent';
import ErrorCodes from '../common/ErrorCodes.js';
require("../styles/less/style.less");
require("../styles/less/custom.less");
require("../styles/less/resize.less");
var HeaderComponent = React.createClass({
render: function() {
return <header className="main-header">
{/*<!-- Logo -->*/}
<a href="javascript:void(0)" className="logo">
<img src={require("../img/logo2.png")} alt="" className="img-responsive" />
</a>
<nav className="navbar navbar-static-top">
{/* Sidebar toggle button */}
<a href="javascript:void(0)" className="sidebar-toggle" onClick={this.props.onClick} data-toggle="offcanvas" role="button">
<span className="sr-only">Toggle navigation</span>
</a>
</nav>
</header>;
}
});
export default HeaderComponent;
это мой package.json
{
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"body-parser": "^1.15.2",
"crypto": "0.0.3",
"express": "^4.14.0",
"express-session": "^1.14.1",
"file-loader": "^0.9.0",
"fs": "0.0.1-security",
"generic-pool": "^2.4.2",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1",
"gulp-preprocess": "^2.0.0",
"gulp-shell": "^0.5.2",
"install": "^0.8.1",
"less": "^2.7.1",
"nodemailer": "^2.6.4",
"npm": "^3.10.8",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-google-oauth": "^1.0.0",
"passport-twitter": "^1.0.4",
"path": "^0.12.7",
"pg": "^6.1.0",
"pg-parse-float": "0.0.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1",
"react-tools": "^0.13.3",
"react-transform": "0.0.3",
"sendgrid": "^4.7.0",
"style-loader": "^0.13.1",
"superagent": "^2.3.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"react-hot-loader": "^1.3.0"
},
"devDependencies": {
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.16.3",
"css-loader": "^0.25.0",
"jsx-loader": "^0.13.2",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1"
}
}
Комментарии:
1. Я не вижу в этом проблемы. HMR выводит на консоль всякий раз, когда вы что-то изменяете, и повторно отображает этот компонент (в вашем случае,
header.jsx
).2. но он должен обновляться только один раз. Если я что-то изменяю в любом компоненте react, он начинает печатать это сообщение бесконечно много раз, и мой браузер выходит из строя. возможно, потому, что горячая перезагрузка происходит несколько раз при одном изменении. как мне это решить? пожалуйста, помогите @j
3. Возможно, что-то не так с вашим компонентом заголовка, который заставляет react повторно отображать его в бесконечном цикле?
4. я добавил свой header.jsx. если вы можете сказать мне, в чем проблема, это будет здорово .. заранее спасибо
5. Я не вижу, что могло быть не так в этом компоненте. Не могли бы вы jsfiddle настроить, которая воспроизводит эти ошибки консоли?