Passing Daten zwischen zwei nicht verwandten Reagieren Apps

ich eine HTML-Seite, die zwei separate webpack generierte Bündel reagieren einschließlich, jeder mit seinen eigenen index.js Eintrag Datei, die nur eine RenderDOM.render() seiner jeweiligen Komponente tut, um ihre jeweiligen <div>.Passing Daten zwischen zwei nicht verwandten Reagieren Apps

<!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>

Wenn <div id="uxvida-retrieve"></div> angezeigt wird, und wir geben Daten in ihm, erhalten wir eine AJAX-Antwort mit sortierten Daten.

Wir haben Folgendes versucht: Beim Laden der Seite wird jede Komponente gerendert, wir erhalten Daten und von der Komponente id="react-retrieve" werden ReactDOM.render() bis id="react-main" gesendet.

Das erzeugt eine Menge Kopplung und die Konstruktoren werden wieder aufgerufen, und das will ich nicht.

Kurz gesagt, wie übermittele ich diese Daten an die andere React Component/App, ohne erneut zu rufen ReactDOM.render()?

Quelle

2017-10-16 Deses

Ich weiß nicht viel über reagieren, aber am Ende ist es nur Javascript. Können Sie nicht eine global zugängliche "Schnittstelle" für eine oder beide Ihrer "Komponenten" erstellen? Mit anderen Worten, können Sie keine Methode für eine Ihrer react-Komponenten deklarieren, die von der anderen reaktiven Komponente aus dem globalen Gültigkeitsbereich aufgerufen werden kann? – gforce301

haben Sie in Erwägung gezogen, Localstorage zu verwenden? https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – Maru

Oh, ich habe LocalStorage gar nicht berücksichtigt! Es könnte genau das sein, was ich brauchte. – Deses

Wenn ich dich richtig verstanden habe, hast du 2 getrennte reacted appliadtions, die auf die gleiche Seite rendert. Wenn ja, warum können Sie dazu nicht nur eine App verwalten?

Wie auch immer, ich würde vorschlagen, die 2 Anwendungen zusammenzuführen, oder Server Api Anruf zu ändern: Server kann nur die Delta-Daten zurückgeben, ich meine nur den Unterschied vom letzten Anruf vom gleichen Benutzer/Token.

Quelle

2017-10-21 09:39:27 Yossi

Passing Daten zwischen zwei nicht verwandten Reagieren Apps

Antwort

Verwandte Themen