यदि आप फ्लक्स-शैली आर्किटेक्चर का उपयोग कर रहे हैं, तो इसे स्टोर के साथ अच्छी तरह से हासिल किया जा सकता है।
कल्पना कीजिए कि आपके पास MyModalStore (या ShareModalStore, या जो भी मॉडल है) नामक एक स्टोर है। स्टोर में मोडल सामग्री के लिए आवश्यक सभी डेटा शामिल हैं, साथ ही यह प्रदर्शित किया जाना चाहिए या नहीं।
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;
फिर घटक है कि मॉडल दिखाना चाहते हैं:
यहाँ एक सरलीकृत दुकान है कि क्या मॉडल दिख रहा है का ट्रैक रखता है, और क्या शीर्षक है 'SHOW_MODAL' को modalTitle के साथ कार्रवाई करें, और मोडल घटक खुद को दिखाने के लिए स्टोर परिवर्तनों के लिए सुनता है।
उदाहरण के लिए आप इस प्रवाह पैटर्न को देख सकते हैं उदाहरण में facebook/flux on github पर परियोजनाएं।
प्रवाह का उपयोग किए बिना, मुझे लगता है कि आप अपने मॉड्यूल पदानुक्रम को कॉलबैक प्रदान करेंगे ताकि कोई भी मोडल दिखाने के लिए कॉलबैक हिट कर सके, और इसे शीर्ष-स्तर पर वास्तविक मोडल घटक को सौंप दिया गया है। यह बड़े अनुप्रयोगों के लिए एक महान दृष्टिकोण नहीं है, इसलिए मैं प्रवाह दृष्टिकोण की सिफारिश करता हूं।
हमने कुछ store helper code here प्रकाशित किया, लेकिन बहुत सारे libraries and examples out there as well हैं।
स्रोत
2015-05-19 18:40:33
पीट हंट की ['ReactLayeredComponentMixin'] (http://jsfiddle.net/LBAr8/) देखें, जो किसी भी घटक को मॉडलों की तरह कई परतों की अनुमति देता है। इसके अलावा: https://github.com/facebook/react/issues/379 –
[ओवरलेमिक्सिन] (https://github.com/stevoland/react-bootstrap/blob/master/src/OverlayMixin.js) समान दिखता है , लगता है कि यह उस मिश्रण पर भी आधारित है। – Douglas
यह वास्तव में भी ऐसा करना बहुत आसान है। मैं 'रेंडर कॉम्पोनेंट' को लपेटने के लिए 'statics' घटक प्रॉपर्टी का उपयोग करना चाहता हूं ताकि यह हमेशा किसी विशेष स्थिति पर माउंट हो: मेरे डोम में निश्चित div (और यह बनाता है और इसे शरीर में जोड़ता है यदि यह पहले से मौजूद नहीं है)। एक साधारण उदाहरण घटक के लिए यहां मेरी पोस्ट देखें: http://stackoverflow.com/questions/24239157/how-to-make-react-js-play-nice-together-with-zurb-reveal-modal-form/24396559# 24396559 –