reactjsでコンポーネントを動的にロードする方法は？

Question

私はReactjs + React-motionプロジェクトを "モーダルウィンドウ"で作業しています（そう言えば）可能なら、コンポーネントを動的にマウントまたはロードしたいのですか？

これまでの解決策：方法を見つけることができなかったため、コンポーネントを適切に配置して非表示にしてから、クラスまたはスタイルを状態の変更、非表示コンポーネントの表示、 「モーダルウィンドウ」の遷移が終了した後。

私がしようとしていることを理解しやすいところにいくつかのコードを共有しています。イベントハンドラはなく、ほとんどのコードは削除されましたが、onRest（アニメーションが終了したときのイベントコールバックが公開されています）およびrender fnも削除されました。

class HomeBlock extends React.Component { 

    constructor (props) { 
     ... 

    } 

    ... 

    motionStyleFromTo() { 

     return { 
      ... 
     }; 

    } 

    onRest() { 

     // this is triggered when the Motion finishes the transition 

    } 

    render() { 

     return (
      <Motion onRest={this.onRestCallback.bind(this)} style={this.motionStyleFromTo()}> 
       {style => 
        <div className="content" style={{ 
         width: `${style.width}px`, 
         height: `${style.height}px`, 
         top: `${style.top}px`, 
         left: `${style.left}px` 
         }}> 
         [LOAD COMPONENT HERE] 
        </div> 
       } 
      </Motion> 
     ); 

    } 

} 

export default HomeBlock; 

Answer 1

これは非常に簡単です。この例では、私は動的に小道具に基づいてコンポーネントをレンダリングしています：

あなたのケースでは

class MyComponent extends React.Component { 
    propTypes: { 
    display: React.PropTypes.bool 
    }, 
    render() { 
    return (
     <div> 
     {this.props.display ? <ChildComponent /> : null} 
     </div> 
    ) 
    } 
} 

コンポーネントをマウントまたはアンマウントする内部コンポーネントの状態を使用することをお勧めします。

FYIスタイルを使用してコンポーネントを破棄するのではなく、非表示にしたい場合があります。これについてはリアクションの文書でさらに詳しく述べています。 https://facebook.github.io/react/docs/multiple-components.html

Answer 2

依存性注入と依存性コンテナの概念を使用してこれを行うことができます。私はあなたがD1、D2、D3と呼ばれる4つの成分を持っていると仮定しましょう。この主旨のページ

https://gist.github.com/SamanShafigh/a0fbc2483e75dc4d6f82ca534a6174d4

でいくつかのサンプルコードを提供してきました。必要なのは、依存性注入と依存性コンテナのメカニズムを作成することです。これは

あなたのコンポーネント

export default [ 
    { 
    name:'D1', 
    path:'D1' 
    }, 
    { 
    name:'D2', 
    path:'D2' 
    }, 
    { 
    name:'D3', 
    path:'D3' 
}]; 

を定義し、あなたが代わりに最後にこの

import componentsConfig from 'ComponentsConfig'; 

let components = {}; 

for (var i = 0; i < componentsConfig.length; i++) { 
    let componentConfig = componentsConfig[i]; 
    // Check if component is not already loaded then load it 
    if (components[componentConfig.name] === undefined) { 
    components[componentConfig.name] = require(`${componentConfig.path}`).default; 
    } 
} 

export default components; 

のようなコンポーネントのコンテナに何かを持つことができ、このような設定ファイルを持っている想像してみて非常に単純な実装でありますコンポーネントを動的にロードするためにコンポーネントコンテナを使用できるコンポーネントをロードする、つまりコンポーネントをインジェクトすることができます。

import React, { Component } from 'react'; 
import ComponentContainer from './ComponentContainer'; 

class App extends Component { 
    render() { 
    let components = ['D1', 'D2', 'D3']; 

    return (
     <div> 
     <h2>Dynamic Components Loading</h2> 
     {components.map((componentId) => { 
      let Component = ComponentContainer[componentId]; 
      return <Component>{componentId}</Component>; 
     })} 
     </div> 
    ); 
    } 
} 

export default App;