反应热加载器不适用于样式化组件答案

【问题标题】：React hot loader not working with styled-components反应热加载器不适用于样式化组件
【发布时间】：2018-05-17 02:56:46
【问题描述】：

我正在使用 react-hot-loader 版本 3.1.3、styled-components 版本 2.2.0 和 react 16。这是我在控制台中收到的错误消息。我已经尝试将 styled-components 降级到版本 2.0.0 并将 react-hot-loader 降级到版本 3.0.0 但它仍然无法正常工作，所以我正在使用这些脚本的最新版本。

React Hot Loader：Hot Loader 不接受此组件。请检查它是否被提取为顶级类、函数或变量。

点击下方显示源位置： ƒ StyledComponent() { classCallCheck(this, StyledComponent); return possibleConstructorReturn(this, _ParentComponent.apply(this, arguments)); }

我有一个这样的样式组件：

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();

【问题讨论】：

标签： javascript css reactjs styled-components react-hot-loader

【解决方案1】：

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

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

<BrowserRouter>
   <Component/>
</BrowserRouter>

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

注意：由于this 问题，热模块更换不适用于styled-components v2.2.1。由于您使用的是v2.2.0，所以您应该不会遇到这个问题。

【讨论】：