2015-07-01 8 views
23

प्रतिक्रिया-राउटर में Link घटक के माध्यम से किसी ऑब्जेक्ट को पास करना संभव है?प्रतिक्रिया राउटर में लिंक के माध्यम से ऑब्जेक्ट पास करें

कुछ की तरह:
<Link to='home' params={{myObj: obj}}> Click </Link>

उसी तरह के रूप में मैं ParentChild के घटक से props पास होता है।

यदि यह संभव नहीं है तो इसे प्राप्त करने का सबसे अच्छा तरीका क्या है:
मेरे पास एक प्रतिक्रिया + फ्लक्स ऐप है, और मैं कुछ डेटा के साथ तालिका प्रस्तुत करता हूं। मैं जो करने की कोशिश कर रहा हूं वह यह है कि जब मैं पंक्तियों में से किसी एक पर क्लिक करता हूं तो यह मुझे इस पंक्ति के लिए विवरण घटक पर ले जाएगा। पंक्ति में मुझे आवश्यक सभी डेटा हैं इसलिए मैंने सोचा कि यह बहुत अच्छा होगा अगर मैं इसे Link के माध्यम से पास कर सकता हूं।

अन्य विकल्प, यूआरएल में पंक्ति के id पारित में विवरण इसे पढ़ा घटक और आईडी के आधार पर के लिए दुकान से डेटा का अनुरोध किया जाएगा।

सुनिश्चित नहीं हैं कि इसके बाद के संस्करण को प्राप्त करने का सबसे अच्छा तरीका है ...

+0

पर कैसे निर्भर करता है आप अपना डेटा समग्र रूप से प्राप्त करते हैं, मैं बाद वाला विकल्प कहूंगा। –

उत्तर

23

तो इस सवाल पर मेरा अंतिम निष्कर्ष यह है कि मैंने इसे ठीक से नहीं सोचा था। यह Link के माध्यम से अपने डेटा को पास करने के लिए प्राकृतिक लग रहा था, इसलिए मैं उन्हें अपने Child घटक में एक्सेस कर सकता हूं। Colin Ramsay के अनुसार को Link में कुछ कहा जाता है लेकिन ऐसा करने का तरीका नहीं है। जब डेटा Link के माध्यम से पारित किया जाता है तो यह ठीक काम करेगा अगर उपयोगकर्ता कुछ पर क्लिक करता है और उसे Child घटक पर ले जाया जाता है।

समस्या तब होती है जब उपयोगकर्ता url का उपयोग करता है जिसका उपयोग Link में किया जाता है, तो डेटा प्राप्त करने का कोई तरीका नहीं है।

तो मेरे मामले में समाधान Link पैरामीटर में ID पारित करने के लिए और उसके बाद जाँच लें कि मेरी Store (उपयोगकर्ता Link के माध्यम से उसके द्वारा पहुंच) डेटा है और फिर Store से इस डेटा प्राप्त था।

या यदि डेटा Store में नहीं है तो action पर एपीआई से डेटा लाने के लिए कॉल करें।

+0

प्रतिक्रिया-राउटर 3.0.0 में लिंक घटक में "पैरा" विशेषता नहीं है। वर्तमान संस्करण के लिए यह कैसे किया जाता है? – Misi

10

नहीं क्या है, तो आप params में एक वस्तु पारित नहीं हो सकता, इसलिए मैं आप के साथ सहमत हैं कि अपने सबसे अच्छे योजना के लिए आईडी पारित करने के लिए है एक दुकान, स्टोर CHANGE घटना उत्सर्जित करता है, और घटक जानकारी के लिए स्टोर पूछताछ करते हैं।

3

यह संभव नहीं है, आपको कुछ ऐसा करने की आवश्यकता है जो URL में संग्रहीत किया जा सके जैसे स्ट्रिंग आईडी। फिर आप ऑब्जेक्ट का लुकअप करने के लिए उस आईडी का उपयोग करेंगे।

+0

ऑब्जेक्ट को जेएसओएन के रूप में पास करने का एकमात्र विकल्प होगा, लेकिन फिर भी आप इसे किसी ऐसे रूप में संग्रहीत करेंगे जो यूआरएल में संग्रहीत हो जाता है। लिंक के लिए एक राज्य प्रोप भी है जिसे आप देख सकते हैं लेकिन यह वही बात नहीं है। –

1

आप जेएसओएन को क्रमबद्ध करने की कोशिश कर सकते हैं और फिर इसे प्राप्त करने वाले अंत में डी-क्रमबद्ध कर सकते हैं।

0

किसी ऑब्जेक्ट को लिंक के माध्यम से पास करना संभव है।बल्कि पैरामीटर से एक प्रश्न के अंतर्गत अपना डेटा जोड़ें और वस्तु stringify:

<Link to={{ pathname: `/blog/${post.id}`, query: { 
 
    title: post.title, 
 
    content: post.content, 
 
    comments: JSON.stringify(post.comments) 
 
} }}>Read More...</Link>

तो अपने बच्चे घटक में स्ट्रिंग एक वस्तु में वापस पार्स:

JSON.parse(this.props.comments) 
संबंधित मुद्दे