React Hot Loader v3。 Hot Loader不接受此组件

Question

我已将react-hot-loader更新为v.3.0.0，当我更改组件中的某些内容时，我会在浏览器中获得更新，但我也会在控制台中收到此警告：

  

React Hot Loader：Hot Loader不接受此组件。   请检查它是作为顶级类，函数还是a提取的   变量。单击下方以显示源位置：

问题是我没有在堆栈中看到任何暗示错误在哪里的内容。

webpack条目

client: [
  'react-hot-loader/patch',
  'webpack/hot/only-dev-server',
  'wicg-focus-ring',
  PATHS.clientBundleEntry,
],

eslint

"plugins": [
    "react-html-attrs",
    "transform-runtime",
    "transform-class-properties",
    "styled-jsx-postcss/babel",
    "react-hot-loader/babel"
  ]

client.jsx

function render() {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <BrowserRouter>
          {app}
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    document.getElementById('app'),
  );
}

render();
if (module.hot) {
  module.hot.accept('./app', () => { render(); });
}

修改

我改变了：

export default withRouter(
  connect(
    (state: ReduxState) => ({
      error: state.requestState.loginError,
    }),
    { loginUser },
  )(LoginContent),
);

成：

const withRouterLoginContent = withRouter(LoginContent);
export default connect(
  (state: ReduxState) => ({
    error: state.requestState.loginError,
  }),
  {
    loginUser,
  },
)(withRouterLoginContent);

...它在一些案例中有所帮助。不知道有什么区别。

Answer 1

我遇到了同样的问题，并且能够通过不使用＆＃34;功能组合＆＃34;来解决它。组合多个高阶组件as described in React Hot Loader's Troubleshooting Guide。

他们的解决方案＆＃34;在页面底部为我修复了警告。转载于此，这是转换的问题：

const SuperComponent = 
     connect()(         <-- last HoC
       withSomeStuff(   <-- first HoC
         Component      <-- a real component
       )
     );

要：

const WithSomeStuffComponent = withSomeStuff(Component);
const SuperComponent = connect()(WithSomeStuffComponent);