在狀態內部動態加載反應組件

Question

我手頭有一個非常有趣的問題。

我目前正在為無頭CMS設計Admin-Interface，並且我想動態加載組件以查看不同部分的內容。

我知道從v4開始使用React Router相當容易，但是我不想依靠Routes來處理它以保持URL盡可能干凈。

這是我正在嘗試做的事情：

1. 我想呈現UI的基本布局（在其中單擊導航鏈接時加載不同的子組件）
2. 在這個基本布局的async componentWillMount()函數內部，我想使用await import()來import()所述組件
3. 理想情況下，應將其存儲到狀態為this.state.mainComponents的狀態中。
4. 然后，我將把這些組件的名稱和一個函數一起傳遞給導航組件，該函數將更改父state當前顯示的組件

我嘗試了幾種不同的方法，但直到現在一直沒有使它起作用。

這就是我現在所擁有的：

  async componentDidMount() {
    const mainComponents = {
      Dashboard: await import('../_mainComponents/Dashboard').then(
        ({ Dashboard }) => {
          return Dashboard;
        },
      ),
    };

    const componentNames = [];

    for (let p in mainComponents) {
      componentNames.push(p);
    }

    this.setState({
      mainComponents: {
        views: mainComponents,
        names: componentNames,
      },
      currentComponent: mainComponents.Dashboard,
      currentTitle: 'Dashboard',
    });
  }

我真的很感謝您可以為此提供的任何幫助。

編輯：

因此，根據@MosèRaguzzini的回答，我再次實現了react-loadable ，並嘗試將const存儲在我的狀態中，如下所示：

const LoadableDashboard = Loadable({
  loader: () => import('../_mainComponents/Dashboard'),
  loading: Loading
});

const mainComponents = {
  Dashboard: LoadableDashboard
};

在我的構造函數中，我試圖將此對象傳遞給這樣的狀態：

const componentNames = [];

for (let p in mainComponents) {
  componentNames.push(p);
}

this.state = {
  mainComponents: {
    views: mainComponents,
    names: componentNames,
  },
  currentComponent: null,
  currentTitle: null,
  loading: false,
};

嘗試將存儲在this.state.mainComponents.views對象內部的組件輸出到render函數時，此方法不起作用。

當使用<Dashboard />它可以按預期工作，但這不是我想要在這里完成的工作，因為我不想在大量的switch ... case中將每個組件添加到render函數中。

你們中有人知道我該如何做到嗎？

Answer 1

我找到了解決問題的方法，並希望與所有尋求我找到合適答案的人分享。

這是我所做的：

import Loadable from 'react-loadable';
import Loading from '../_helperComponents/Loading';

// Define the async-loadable components here and store them inside of the mainComponent object
const LoadableDashboard = Loadable({
  loader: () => import('../_mainComponents/Dashboard'),
  loading: Loading,
});

const LoadableUserOverview = Loadable({
  loader: () => import('../_mainComponents/UserOverview'),
  loading: Loading,
});

const mainComponents = {
  Dashboard: <LoadableDashboard />,
  User: <LoadableUserOverview />,
};

我沒有將組件存儲在我的狀態內（這是可能的，但是違反了我進一步研究狀態所發現的准則）：D

有了這個對象，我可以像下面這樣簡單地通過在render()函數中輸出相應的組件來調用它：

render() {
  return (
    <div>
      {mainComponents[this.state.currentComponent]}
    </div>
  );
}

我希望我可以幫助某人。 編碼愉快！

Answer 2

我建議看一下react-loadable：

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

它以簡潔的樣式提供您需要的功能。