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而未设置{{ 1}}在noInterop上为false，如下所示： .babelrc

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

2 个答案: