同じバンドルのReactアプリケーションの複数のインスタンスにJSONコンフィグを渡す

Question

私はreact-slickカルーセルのいくつかのインスタンスを持っています。それぞれには異なる設定オプションのセットが必要です。

現在、私はカルーセルコンポーネントをwebpack経由でバンドルし、複数の場所に展開しています。残念ながら、これは、コンフィグファイルがバンドル全体を変更するので、バンドルがそれぞれの場合に若干異なることを意味します！このソリューションの正しいアプローチは何ですか？

私は、次の解決策を考えることができるような気がします：

1）非同期に設定ファイルをロードします。余分な往復旅行を過度に行うため、怠惰な解決策のように見えます。

2）require.ensureを使用して、設定ファイルを独自のチャンクに分割してみます。

このソリューションにはどのようなアプローチが適していますか？

ありがとうございます！ポイント1のために返信する

Answer 1

、私は設定の実行時の荷重をこのように達成するために管理している：

import xhr from 'xhr' 
class Config { 

    load_external_config = (cb) => { 
     xhr.get("config.json", { 
      sync: true, 
      timeout: 3000 
     },(error, response, body)=>{ 
      if(response.statusCode==200) { 
       try{ 
        const conf = JSON.parse(body); 
        for(var i in conf) { 
         this[i] = conf[i]; 
        } 
       }catch(e){ 
        /* Manage error */ 
       } 
      } else { 
       /* Manage error */ 
      } 
     }) 
    } 

} 

export let config = new Config(); 

上記のクラスは、2つの基本的な機能を持っている、一方でそれはそう、「シングルトン」でありますそれをプロジェクトの各ファイルにインポートするたびに、同値は同じままであり、複製されません。一方、XHRパッケージを使用すると、外部のjsonファイルを（同期して）ロードし、すべての設定音声をそのインスタンスに第1レベルの属性として配置します。その後、あなたはこれを行うことができるようになります：

は

import { config } from './config' 

config.load_external_config(); 
config.MY_VAR 

ポイント2のために私はいくつかの例を見てみたい、と私は私よりも多くの業者のために、この記事にチューニングされたままになります。