react-loadable exception“需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到了:object”

Question

我正在使用react-loadable来拆分我的react代码。在基本用法下，它的功能正常，但当我自定义渲染输出时，它得到了一些异常，如下所示：

​

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

​

我的代码是：

​

function Loading(props) {
  if (props.error) {
    return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
  } else {
    return <div>Loading...</div>;
  }
}

const PipelineConversion = Loadable({
  loader: () => import('App/Reports/Components/PipelineConversion'),
  loading: <Loading />,
  render(loaded, props) {
    const PipConversion = loaded.default;
    return <PipConversion {...props} />;
  },
});

​

如果有人给我一些帮助或提示，我将不胜感激。谢谢。

Answer 1

您应该将一个函数传递给loading属性。您的Loading变量已经是一个函数，您不需要将它括在方括号<>中。

对于您的情况，这应该是可行的

Loadable({
  loading: Loading
});

或者在函数中使用它

Loadable({
  loading: () => <Loading />
});

Answer 2

对于那些因为他们是服务器端渲染应用程序(服务器babel转译的文件)而导致上述错误的人来说，这可能是因为您正在使用airbnb babel-plugin-dynamic-import-node，而没有在.babelrc上将noInterop设置为false，如下所示：{ "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }