React: modalna ze stwardnieniem łącza wyzwala

Question

Bardzo nowy reagować, zastanawiałem się, jak zaimplementować ten wzór:

• okno modalne w dom, ukryty aż wyzwolony.
• Wiele łączy w dokumencie, które mogą uruchamiać dane modalne i przekazywać do niego.

Jest to coś, co możesz znaleźć na swoim własnym kanale na Facebooku: po prostu kliknij "Udostępnij" w dowolnym poście, a wygrasz fantastyczny modal.

Nie jesteś pewien, w jaki sposób przetłumaczysz to na "Składniki DOM DOMU React"?

W jaki sposób komunikat komponentu wyzwalającego modalnego komponentu, który wydaje się być wyłączony w drzewie DOM?

Answer 1

Jeśli używasz architektury typu Flux, można to osiągnąć ładnie dzięki Store.

Wyobraź sobie, że masz sklep o nazwie MyModalStore (lub ShareModalStore lub dowolny inny modał). Magazyn zawiera wszystkie dane potrzebne do zawartości modalnej, a także to, czy ma być wyświetlany, czy nie.

Oto uproszczony sklep, który śledzi czy modalna jest widoczny, a co tytuł brzmi:

MyModalStore.js

var _visible = false; 
var _modalTitle; 

var MyModalStore = { 
    isModalVisible: function() { 
     return _visible; 
    }, 
    getModalTitle: function() { 
     return _modalTitle; 
    } 
}; 

MyModalStore.dispatchToken = Dispatcher.register(function(payload) { 
    var action = payload.action; 
    switch (action.type) { 
     case 'SHOW_MODAL': 
      _visible = true; 
      _modalTitle = action.modalTitle; 
      MyModalStore.emitChange(); 
      break; 

     case 'HIDE_MODAL': 
      _visible = false; 
      MyModalStore.emitChange(); 
      break; 
    } 
}); 

module.exports = MyModalStore; 

wówczas elementy, które chcą pokazać modalne uruchamiać akcję 'SHOW_MODAL' za pomocą modalTitle, a sam komponent modalny nasłuchuje zmian w sklepie, aby wiedzieć, kiedy się pokazać.

Ten wzór strumienia można zobaczyć w przykładowych projektach na facebook/flux on github.

Bez korzystania z strumienia, wydaje mi się, że zapewniasz wywołanie zwrotne w dół hierarchii modułów, aby każdy mógł uruchomić wywołanie zwrotne, aby pokazać modalny, a to jest delegowane do rzeczywistego komponentu modalnego na najwyższym poziomie. To nie jest świetne podejście do większych aplikacji, więc polecam podejście flux.

Opublikowaliśmy niektóre store helper code here, ale istnieje wiele innych libraries and examples out there as well.