Question

我正在使用react-hot-loader版本3.1.3，样式组件版本2.2.0并反应16。这是我在控制台中收到的错误消息。我已经尝试将样式组件降级到版本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();

Answer 1

我认为这是由react-hot-loader <BrowserRouter> <Component/> </BrowserRouter> this问题引起的。

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

index.js

然后，导入AppContainer中的导出组件，并将其放在styled-components v2.2.1标记之间。

注意：由于this问题，热模块更换无法与v2.2.0一起使用。在使用<p>First p</p><img class="image" src="one.jpg" /> <p>Second p</p><img class="image" src="two.jpg" />时，您不应该遇到此问题。

反应热装载程序不使用样式组件

1 个答案: