使用React.Lazy的動態延遲加載（16.6.0）

Question

我得到一個像

{Path:xxx, 
Component:"./xxx/ComPXX"}

從我的API並基於此創建我的應用程序的路由。 目前，我正在使用React-Loadable（5.5.0）和React-Router（4.4.0-betax，以避免在嚴格模式下發出警告）。 在這里查看工作示例。

自從React 16.6引入React.lazy以來，我正在嘗試遷移解決方案，但是我遇到了錯誤和困難，但是我嘗試這樣做。 您可以在此處查看已遷移（失敗）的代碼。

知道為什么這不起作用嗎？ 可能是因為React.Lazy不接受變量嗎？

Answer 1

您有 2 3個主要問題：

1. 在這一行：

    var c = <dynamicLoader component={prop.component} />; 

   用戶定義的組件必須大寫 。 因此將其更改為：

    var c = <DynamicLoader component={prop.component} />; 

   顯然，您還需要更改聲明：

    function DynamicLoader(props) { return ( <Suspense fallback={<div>Loading...</div>}> React.lazy(() => import(`${props.component}`)) </Suspense> ); } 

2. 在這條線

    return <Route exact path={prop.path} component={c} key={key} />; 

   就像prop component的名稱所暗示的那樣，您需要傳遞一個組件而不是一個元素，您可以閱讀有關DOCS差異的更多信息。

   因此，您需要將其更改為：

    return <Route exact path={prop.path} component={() => c} key={key} />; 

3. 你是對的。 我錯過了孩子部分，您正在渲染字符串。 您可以創建一個變量並將其呈現為子變量：

    function DynamicLoader(props) { const LazyComponent = React.lazy(() => import(`${props.component}`)); return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent/> </Suspense> ); }