React Hot loader無法與樣式化組件一起使用

Question

我正在使用3.1.3版本的react-hot-loader， 2.2.0版本的styled-components和react 16 。 這是我在控制台中收到的錯誤消息。 我已經嘗試將樣式化組件降級到2.0.0版，並將react-hot-loader降級到3.0.0版，但是它仍然無法正常工作，因此我正在使用這些腳本的最新版本。

React Hot Loader：Hot Loader不接受此組件。 請檢查是否將其提取為頂級類，函數或變量。

單擊下面以顯示源位置：ƒStyledComponent（）{classCallCheck（this，StyledComponent）; 返回可能的構造函數返回（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();

Answer 1

我認為這是由於react-hot-loader 這個問題而react-hot-loader 。

嘗試將代碼的以下部分包裝到一個獨立的組件中

<BrowserRouter>
   <Component/>
</BrowserRouter>

然后，將導出的組件導入index.js並將其AppContainer標簽之間。

注意：由於此問題，熱模塊更換不適用於styled-components v2.2.1 。 在使用v2.2.0 ，您不應遇到此問題。