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 знал обо всех компонентах пользовательского интерфейса. Sth. как виртуальный компонент <Fragment> который отображает его дочерние элементы без элемента-оболочки, решит проблему, поскольку я мог бы вернуть его из компонента <UI> .

Я знаю, что это редкий случай использования, я довольно талантлив в достижении крайних случаев для каждой структуры, которую я касаюсь.

Забавно, что запись этих вещей иногда волшебным образом заставляет ваш мозг делать полезные вещи. Я нашел другой обходной путь. Я использую visiblity:none на уровне пользовательского интерфейса и visibility:visible в компонентах пользовательского интерфейса. Но это взлом, не более того.