我使用的是 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: this component is not accepted by Hot Loader. Please check is it extracted as a top level class, a function or a variable.
Click below to reveal the source location: ƒ 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();
最佳答案
我认为这是由于 this 而发生的react-hot-loader
问题。
尝试将代码的以下部分包装到独立组件中
<BrowserRouter>
<Component/>
</BrowserRouter>
然后,在index.js
中导入导出的组件,并将其放在AppContainer
标签之间。
注意由于this,热模块替换不适用于styled-components v2.2.1
。问题。由于您使用的是 v2.2.0
,因此您应该不会遇到此问题。
关于javascript - React 热加载程序不适用于样式组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47619882/