React: एक रैपिंग तत्व के बिना कई घटकों को प्रस्तुत करें

मुझे डुप्लिकेट समस्या नहीं मिली, केवल यह पोस्ट https://groups.google.com/forum/#!searchin/reactjs/render $20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

मेरे पास एक वैध उपयोग मामला है और मैं इसे साझा करना चाहता हूं।

मैं प्रतिक्रिया के आधार पर कहानी कहने के लिए एक रूपरेखा तैयार कर रहा हूँ। जैसा कि मैंने एक कस्टम लेआउट इंजन लिखा है और हर चीज पर पूर्ण नियंत्रण की आवश्यकता है, हर एक तत्व निश्चित स्थिति में है। मेरी प्रवेश स्तर की संरचना कुछ इस तरह दिखती है

<Story>
    <Grid />
    <UI />
</Story>

<Grid> कहानी के सभी वास्तविक आइटम ( <GridItem> ) प्रस्तुत करता है (पाठ, चित्र, वीडियो, आदि)। <UI /> यूआई तत्वों को प्रस्तुत करता है जो हर कहानी के लिए सामान्य हैं। उदाहरण के लिए ऑडियो/वीडियो आइटम की मात्रा को नियंत्रित करने के लिए <VolumeControl> ।

अगर मैं ऊपर दी गई संरचना को प्रस्तुत करता हूं, तो यह परिणाम होगा

<div>
    <div>
        <!--list of GridItems-->
    </div>
    <div>
        <!--list of UI components-->
    </div>
</div>

चूंकि सब कुछ निश्चित स्थिति में है, यह काम नहीं करता है। यूआई परत सब कुछ कवर करती है, इसे अनुपयोगी बनाती है (उदाहरण के लिए वीडियो पर क्लिक नहीं कर सकता)। इसलिए मैं वर्तमान में render की Story पद्धति में निम्नलिखित करने के लिए बाध्य हूं

<div>
    <Grid />
    <VolumeControl />
    <Navigation />
    <ShareButtons />
</div>

यह काम करता है लेकिन बदसूरत है क्योंकि मैं अलगाव खो देता हूं। मैं नहीं चाहता कि Story घटक को प्रत्येक UI घटक के बारे में पता होना चाहिए। स्थ. एक आभासी <Fragment> घटक की तरह जो एक रैपर तत्व के बिना अपने बच्चों को प्रस्तुत करता है, समस्या का समाधान करेगा क्योंकि मैं इसे <UI> घटक से वापस कर सकता हूं।

मुझे पता है कि यह एक दुर्लभ उपयोग-मामला है, मैं अपने द्वारा स्पर्श किए जाने वाले प्रत्येक ढांचे के किनारे के मामलों तक पहुंचने के बजाय प्रतिभाशाली हूं।

मजेदार है कि कैसे इन चीजों को लिखना कभी-कभी जादुई रूप से आपके दिमाग को उपयोगी चीजें करने के लिए प्रेरित करता है। मुझे एक और उपाय मिला। मैं उपयोग कर रहा हूँ visiblity:none यूआई परत पर और visibility:visible UI घटकों पर। लेकिन यह एक हैक है, और कुछ नहीं।