2017-10-16 14 views
3

それぞれのindex.jsエントリーファイルを持つ2つのWebpack生成リアクションバンドルを含むHTMLページがあり、それぞれのコンポーネントのRenderDOM.render()はそれぞれ<div>になります。関連のない2つのReactアプリケーション間でのデータの受け渡し

<!doctype html> 
<html lang="en"> 
<head> 
    <link href="stylesheets/styles.css" rel="stylesheet"> 
</head> 
<body> 
    <div> 
     <div id="retrieveBtn" 
      style="border: 1px solid black; padding: 5px; width: 10%"> 
      Recuperar Presupuesto 
     </div> 
     <div id="lightbox-portal" 
      style="display: none; border: 1px solid grey"> 
      <div id="react-retrieve"></div> 
     </div> 
    </div> 
    <section class="tariff"> 
     <div id="react-main" class="tariff__content fadeIn js-animated"></div> 
    </section> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="/eco/econonrps_vflx/build/static/js/main_bundle.js"></script> 
    <script src="/eco/retrieve_vflx/build/static/js/retrieve_bundle.js"></script> 
</body> 
</html> 

<div id="uxvida-retrieve"></div>が表示され、我々はそれにデータを入力した場合、我々は各種データをAJAXの応答を受け取ります。

私たちはこれを試しました:各コンポーネントがレンダリングされ、データを受け取り、id="react-retrieve"に接続されたコンポーネントからReactDOM.render()id="react-main"をもう1つ作成します。

それは多くのカップリングを生成し、コンストラクタが再び呼び出され、私はそれを望んでいません。要するに

、どのように私は再びReactDOM.render()を呼び出すことなく、他のデータは、コンポーネント/アプリケーション反応することを渡すのですか?

+0

私は反応についてはあまりよく分かりませんが、最終的にはジャバスクリプトです。あなたはあなたの「コンポーネント」の一方または両方でグローバルにアクセス可能な「インターフェース」を作れませんか?言い換えれば、他の反応コンポーネントによってグローバルスコープから呼び出すことができる反応コンポーネントの1つにメソッドを宣言することはできませんか? – gforce301

+3

あなたはlocalstorageの使用を検討しましたか? https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – Maru

+0

ああ、私はlocalStorageをまったく考慮しませんでした!それは私が必要とするものかもしれません。 – Deses

答えて

0

私があなたにぴったりなのであれば、同じページにレンダリングする2つの別々の反応アプリケーションがあります。もしそうなら、あなたは1つのアプリしか管理できないのはなぜですか?

とにかく、私は2つのアプリケーションをマージする、またはサーバーAPI呼び出しを変更することをお勧めします。サーバーが唯一の差分データを返すことができ、私は同じユーザ/トークンから最後の呼び出しからの唯一の違いを意味します。

関連する問題