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 }] ] }