反応したホットローダーが定型コンポーネントで動作しない

Question

反応ホットローダーバージョン3.1.3、スタイル付きコンポーネントバージョン2.2.0を使用しており、16と反応しています。これはコンソールに表示されるエラーメッセージです。バージョン2.0.0にダウングレードし、反応ホットローダーをバージョン3.0.0にダウングレードしようとしましたが、それでも動作しないため、これらのスクリプトの最新バージョンを使用しています。

リアクションホットローダー：このコンポーネントはホットローダーには受け入れられません。トップレベルのクラス、関数、変数として抽出されていることを確認してください。

ソースの場所を明らかにするには、以下をクリックしてください：▪StyledComponent（）{classCallCheck（this、StyledComponent）; return possibleConstructorReturn（this、_ParentComponent.apply（this、arguments））; }

私はそうのような1つのスタイルのコンポーネントがあります。

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のthisの問題のために発生しています。

はindex.jsでエクスポートコンポーネントをインポートし、AppContainerタグの間に配置し、その後、スタンドアロンコンポーネントに

<BrowserRouter> 
    <Component/> 
</BrowserRouter> 

をあなたのコードの以下の部分を包むようにしてください。

注：ホットモジュールの交換がstyled-components v2.2.1thisに起因する問題では動作しませdoed。 v2.2.0を使用しているので、この問題は発生しません。