React: Render beberapa komponen tanpa elemen pembungkus

Saya belum menemukan masalah duplikat, hanya posting ini https://groups.google.com/forum/#!searchin/reactjs/render $20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

Saya memiliki kasus penggunaan yang valid dan ingin membagikannya.

Saya sedang membangun kerangka kerja untuk mendongeng berdasarkan reaksi. Setiap elemen diposisikan tetap karena saya telah menulis mesin tata letak khusus dan membutuhkan kontrol penuh atas semuanya. Struktur entry level saya terlihat seperti ini

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

<Grid> merender semua item sebenarnya ( <GridItem> ) dari cerita (teks, gambar, video, dll.). <UI /> merender elemen UI yang umum untuk setiap cerita. Misalnya <VolumeControl> untuk mengontrol volume item audio/video.

Jika saya membuat struktur seperti yang diberikan di atas, ini akan menjadi hasilnya

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

Karena semuanya diposisikan tetap, ini tidak berfungsi. Lapisan UI mencakup semuanya, sehingga tidak dapat digunakan (misalnya tidak dapat mengklik video). Itu sebabnya saya saat ini terpaksa melakukan hal berikut dalam metode render dari Story

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

Ini berfungsi tetapi jelek karena saya kehilangan pemisahan. Saya tidak ingin komponen Story harus tahu tentang setiap komponen UI. st. seperti komponen <Fragment> virtual yang merender turunannya tanpa elemen pembungkus akan menyelesaikan masalah karena saya dapat mengembalikannya dari komponen <UI> .

Saya tahu ini adalah kasus penggunaan yang langka, saya agak berbakat dalam mencapai kasus tepi dari setiap kerangka kerja yang saya sentuh.

Lucu bagaimana menuliskan hal-hal ini terkadang secara ajaib membuat otak Anda melakukan hal-hal yang berguna. Saya menemukan solusi lain. Saya menggunakan visiblity:none pada lapisan UI dan visibility:visible pada komponen UI. Tapi ini peretasan, tidak lebih.