反应热载入程序:此组件未被热载入程序接受
问题描述:
我正在使用https://github.com/stylesuxx/generator-react-webpack-redux作为发生程序,并且正在使用热载入程序。我的代码能够在浏览器中正常加载,但是当我在浏览器中打开开发板,我遇到反应热载入程序:此组件未被热载入程序接受
React Hot Loader: this component is not accepted by Hot Loader.
Please check is it extracted as a top level class, a function or a variable.
Click below to reveal the source location:
ƒ (props, context, updater) {
// This constructor gets overridden by mocks. The argument is used
// by mocks to assert on what gets mounted.
if (process.env.NODE_ENV !== 'production'…
在我client.js
,代码如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { Router, IndexRoute, Route, browserHistory, hashHistory } from 'react-router';
import App from './containers/App';
import configureStore from './stores';
import Contact from './containers/contact/Contact'
import Homepage from './containers/homepage/Homepage'
import About from './containers/about/About'
import Theme from './containers/themes/Themes'
import Login from './containers/login/Login'
import Signup from './containers/signup/Signup'
const store = configureStore();
const routes = {
path: '/',
indexRoute: {onEnter: (nextState, replace) => replace('/home')},
childRoutes: [
require('./containers/homepage').default,
require('./containers/themes').default,
require('./containers/contact').default,
require('./containers/about').default,
require('./containers/login').default,
require('./containers/signup').default,
{
path: '*',
indexRoute: { onEnter: (nextState, replace) => replace('/error/404') }
}
]
}
ReactDOM.render((
<Provider store={store}>
<Router onUpdate = {() => window.scrollTo(0, 0)}
history={hashHistory}
routes={routes}
/>
</Provider>
), document.getElementById('app'));
// if (module.hot) {
// module.hot.accept('./containers/App',() => {
// const NextApp = require('./containers/App').default; // eslint-
disable-line global-require
//
// ReactDOM.render(
// <AppContainer>
// <Provider store={store}>
// <NextApp />
// </Provider>
// </AppContainer>,
// document.getElementById('app')
// );
// });
// }
我应该如何修改注释代码以使Hot Loader接受组件,我尝试使用下面的代码,但它不起作用。
if (module.hot) {
module.hot.accept('./containers/App',() => {
const NextApp = require('./containers/App').default; // eslint-disable-line global-require
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<Router onUpdate = {() => window.scrollTo(0, 0)}
history={hashHistory}
routes={routes}
/>
</Provider>
</AppContainer>,
document.getElementById('app')
);
});
}
答
我看到很多代码重复。而不是所有的ReactDOM.render((
尝试创建函数,为您呈现DOM。
看我的例子repo
首先我创建render
功能:
const render =() => { ReactDOM.render(
(
<Provider store={store}>
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
</Provider>
),
document.getElementById('root'), ) }
然后我渲染应用:
render()
然后我处理热重装:
if (module.hot) {
module.hot.accept()
}
这可能是这样也处理:
if (module.hot) {
module.hot.accept('./app',() => {
const UpdatedApp = require('./app').default // require('./app').default = renderRoutes(routes)
render(UpdatedApp)
})
}
但我的观点是,你不想重复渲染DOM代码。当您提取代码并创建用于渲染客户端代码的专用函数时。你会看到更清晰的解决方案。
它也将帮助您处理服务器端渲染,因为您将能够使用相同的功能呈现服务器上的代码。
你让它工作? :) – Michal
不= =(我现在决定忽略它 –
看看我的回购,你可能需要摆脱服务人员,除此之外,它对你的项目来说几乎是完美的形状,你可以回到这个问题后面 – Michal