React: تجسيد مكونات متعددة بدون عنصر التفاف

لم أجد مشكلة مكررة ، فقط هذه المنشور https://groups.google.com/forum/#!searchin/reactjs/render $ 20multiple / reactionjs / 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 كل مكون من مكونات واجهة المستخدم. سث. مثل المكوِّن الافتراضي <Fragment> الذي يجعله أطفالًا بدون عنصر غلاف سيحل المشكلة حيث يمكنني إعادته من المكوِّن <UI> .

أعلم أن هذه حالة استخدام نادرة ، فأنا موهوب جدًا في الوصول إلى الحالات المتطورة لكل إطار عمل أتطرق إليه.

من المضحك أن كتابة هذه الأشياء أحيانًا بطريقة سحرية تجعل عقلك يقوم بأشياء مفيدة. لقد وجدت حلاً آخر. أنا أستخدم visiblity:none على طبقة واجهة المستخدم و visibility:visible على مكونات واجهة المستخدم. لكنه اختراق ، لا أكثر.