React Hot Loader：Hot Loader 不接受此组件答案

【问题标题】：React Hot Loader: this component is not accepted by Hot LoaderReact Hot Loader：Hot Loader 不接受此组件
【发布时间】：2018-04-02 09:04:49
【问题描述】：

我正在使用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')
//     );
//   });
// }

我应该如何修改注释代码以使热加载器接受组件，我尝试了下面的代码，它不起作用。

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')
    );
  });
}

【问题讨论】：

你成功了吗？ :)
否 =( 我决定暂时忽略它
看看我的回购。您可能需要摆脱服务人员。除此之外，它对于您的项目来说几乎是完美的形状。您可以稍后再回答这个问题。
我已经排除了 initializeServiceWorkers() 但它仍然不起作用。我尝试在 if (module.hot) 逻辑中 console.log 一些东西，但控制台中没有显示任何内容 =(
@Michal 感谢您的帮助。我怎样才能找到更好的方式联系您（在聊天示例中），以便我们可以更快地一起解决这个问题

标签： javascript reactjs react-hot-loader

【解决方案1】：

我看到很多代码重复。尝试创建为您呈现 DOM 的函数，而不是所有的 ReactDOM.render((。

看我的例子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 代码。当您提取代码并创建用于呈现客户端代码的专用函数时。您会更清楚地看到解决方案。

它还将帮助您处理服务器端渲染，因为您将能够使用相同的函数在服务器上渲染代码。

【讨论】：