Reactを動的に追加する

Question

背景：私はReact、ReduxでES6を使用して作業アプリケーションを作成しました。 WebpackはCommonJSパターンのバンドラとして使用されます。

必須：反応成分を含む別のファイルを作成しました。今私はいくつかのグローバルパラメータ値に基づいてコンポーネントを切り替えたいと思う。私はrenderメソッドの中にif条件を追加しました。以下のコードを参照してください -

const LPage =() => { 
    let resource = window.keys; 

    if(window.switchComponent == 0) 
    { 
     return (
      <div className="container containerHome">  
      <div className="col-xs-12 col-sm-12 text-center"> 
       <a className="logo spriteMobile"></a> 
      </div> 
      </div> 
     ); 
    } 
    else 
    { 
     return window.AnotherComponent(); 
    }  
}; 

ステートレスコンポーネントの場合はうまくいきます。私はこのような外部コンポーネントを使用するために何かを書く必要がありました。

window.React = React; 
window.ReactDOM = ReactDOM; 

このようにしてステートフルコンポーネントを置き換えることはできません。彼らは行動を起こさせて店を更新しなければならない。これらのステートフルなコンポーネントを外部のJavaScriptを使用して置き換える/交換する方法はありますか？

Answer 1

まず、window.AnotherComponent()は、Reactでコンポーネントをインスタンス化する方法ではありません。ここの正しい方法はreturn <window.AnotherComponent />です。プロパティを渡す必要がある場合は、次のようにすることもできます。return <window.AnotherComponent foo={true}/>

これで、やり方は非常にリアクション的です。一度、window.switchComponentの値が変更された場合、Reactはコンポーネントの状態が変更されたことを知る方法がないため、コンポーネントは再レンダリングされません。グローバル設定値をコンポーネントツリーの下に提供する他の方法があります。たとえば、Reduxストアに設定します（これは既に設定済みです）。