react-loadable异常“预期了字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象”

Question

我正在使用react-loadable拆分我的反应代码。 通过基本用法，它可以正常运行，但是当我自定义渲染输出时，它会出现一些异常，如下所示：

 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而未将noInterop设置为false .babelrc如下： { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }