状態の中での反応成分の動的負荷

Question

私は本当に面白い問題を抱えています。

私は現在、ヘッドレスCMSのAdmin-Interfaceに取り組んでおり、さまざまな部品の内容を表示するためにコンポーネントを動的にロードしたいと考えています。

私は、v4からウィットリアクタを達成するのはむしろ簡単だと知っていますが、これを処理してURLをきれいに保つためにRoutesに頼ることは望ましくありません。ここで

は私がしようとしているものです：

1. 私はUIの基本的なレイアウトをレンダリングする（ナビゲーションリンクをクリックしたとき、私は 異なるサブコンポーネントをロードする）
2. 私はimport()にしたい、この基本的なレイアウトのasync componentWillMount()機能内部の部品が理想的には、これらの
3. await import()を使用してと呼ばれるプロパティの内部状態に保存しなければならないと述べた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', 
    }); 
    } 

私は本当にあなたがこの上で私を与えることができる任意のヘルプをいただければ幸いです。

EDIT：

だから私は再びreact-loadableを実施し、このように私の状態の内側のconstを保存しようとしたモーゼRaguzzini @の答えによると：私はしようとしています

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

const mainComponents = { 
    Dashboard: LoadableDashboard 
}; 

そして、私のコンストラクタ関数内出力にTの内部に格納さコンポーネントをしようとしたときにそれが動作していない

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オブジェクトをレンダー機能の内側に配置します。 <Dashboard />を使用している場合

期待どおりに動作しているが、これは、私は大規模なswitch ... caseでレンダリング機能にすべてのコンポーネントを追加したくないので、私はここで達成しようとしているものではありません。

私はこれをどのように達成できるか考えている人はいますか？

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 />, 
}; 

私は私の状態内部のコンポーネントを格納しない（それが可能だったが、私はさらに状態を調査することにより、アウト見つけたようなガイドラインに反するだろう）：私はCOU期待

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

：D

このオブジェクトに私は単にこのようrender()関数でそれを出力することにより、対応するコンポーネントを呼び出すことができ誰か助けてください。 ハッピーコーディング！

Answer 2

私が反応し、ロード可能なために見てみることをお勧め：

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/>; 
    } 
} 

それはあなたがクリーンなスタイルで必要な機能を提供します。