React: 래핑 요소 없이 여러 구성요소 렌더링

중복 문제를 찾지 못했습니다. 이 게시물만 https://groups.google.com/forum/#!searchin/reactjs/render $20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

유효한 사용 사례가 있으며 공유하고 싶습니다.

반응을 기반으로 스토리텔링을 위한 프레임워크를 구축 중입니다. 사용자 정의 레이아웃 엔진을 작성하고 모든 것을 완벽하게 제어해야 하므로 모든 단일 요소는 고정된 위치에 배치됩니다. 내 엔트리 레벨 구조는 다음과 같습니다.

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

<Grid> 는 이야기의 모든 실제 항목( <GridItem> )(텍스트, 이미지, 비디오 등)을 렌더링합니다. <UI /> 는 모든 스토리에 공통적인 UI 요소를 렌더링합니다. 예를 들어 오디오/비디오 항목의 볼륨을 제어하기 위한 <VolumeControl> 입니다.

위에서 주어진 구조를 렌더링하면 이것이 결과가 될 것입니다.

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

모든 것이 고정된 위치에 있기 때문에 작동하지 않습니다. UI 레이어는 모든 것을 덮어 사용할 수 없도록 만듭니다(예: 비디오를 클릭할 수 없음). 그래서 현재 Story 의 render 메서드에서 다음을 수행해야 합니다.

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

이것은 작동하지만 분리를 잃을 때 추악합니다. Story 구성 요소가 모든 UI 구성 요소에 대해 알아야 하는 것을 원하지 않습니다. 성. 래퍼 요소 없이 자식을 렌더링하는 가상 <Fragment> 구성 요소처럼 <UI> 구성 요소에서 반환할 수 있으므로 문제를 해결할 수 있습니다.

나는 이것이 드문 사용 사례라는 것을 알고 있으며, 내가 만지는 모든 프레임워크의 가장자리 사례에 도달하는 데 다소 재능이 있습니다.

이런 것들을 적어두는 것이 때때로 마술처럼 당신의 두뇌가 유용한 일을 하도록 만드는 방법이 재미있습니다. 다른 해결 방법을 찾았습니다. 내가 사용하고 visiblity:none UI 계층에와 visibility:visible UI 컴포넌트에 있습니다. 그러나 그것은 해킹, 그 이상은 아닙니다.