React Hot Loader无法与样式组件一起使用

Question

我正在使用React-Hot-Loader版本3.1.3，样式组件版本2.2.0和React 16。这是我在控制台中收到的错误消息。我已经尝试将样式组件降级到版本2.0.0，并将React-Hot-Loader降级到版本3.0.0，但它仍然不起作用，因此我使用了这些脚本的最新版本。

React Hot Loader：此组件不被热装载器接受。请检查它提取为顶级类，功能或变量。

单击下面显示源位置：ƒstyledComponent（）{classCallCheck（this，styledComponent）;返回PossibleConstructorturn（this，_ParentComponent.Apply（this，gruments））;}

我有一个样式的组件：

const Li = styled.li`
  padding: 10px;
  padding-bottom: 20px;
  margin: 0;
  font-size: 14px;
  color: #333`;

，在我的脚本的顶部，我正在类似地导入样式：

import styled from 'styled-components';

这是我的index.js文件的内容：

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/index.css';
import App from './components/App/App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import { AppContainer } from 'react-hot-loader';
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <BrowserRouter>
        <Component/>
      </BrowserRouter>
    </AppContainer>,
    document.getElementById('root')
  );
}
render(App);
if (module.hot){
  module.hot.accept( './components/App/App', () => { render(App) });
}
registerServiceWorker();

Answer 1

我认为这是由于react-hot-loader的这一问题而发生的。

尝试将代码的以下部分包装到独立组件

中

<BrowserRouter>
   <Component/>
</BrowserRouter>

然后，将导出的组件导入index.js中，然后将其放在AppContainer标签之间。

注意：热模块更换是由于此问题而无法与styled-components v2.2.1一起使用。当您使用v2.2.0时，您不应遇到此问题。