react-loadable 异常'期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象'答案

【问题标题】：react-loadable exception 'expected a string (for built-in components) or a class/function (for composite components) but got: object'react-loadable 异常'期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象'
【发布时间】：2018-08-02 04:31:09
【问题描述】：

我正在使用 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} />;
  },
});

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

【问题讨论】：

标签： reactjs

【解决方案1】：

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

对于您的情况，这应该可以工作

Loadable({
  loading: Loading
});

或者在函数中使用它

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

【讨论】：

你救了我的命 :)

【解决方案2】：

对于那些因为他们是服务器端渲染应用程序（服务器 babel 转译文件）吐出上述错误而来到这里的人，这可能是因为您使用 airbnb babel-plugin-dynamic-import-node 而没有设置 @987654321 @ 到 .babelrc 上的 false 如下： { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

【讨论】：