React - UI Structural question

0

Building a UI interface that is composed of Views.

One common interface is a split view. Similar to Mail on iPad, it contains a
side view and a main view.

1.html is my current solution, but thinking of doing 3.html.

Problem with current solution is how would Main manipulate props on Side
(necessary for parallax effect when dragging out of Main).

1.html

<div>
  <ViewSide></ViewSide>
  <ViewMain></ViewMain>
</div>

<!--
  Current setup. Properties for both views are setup and then
  passed into a regular View component.
  
  Issue is I'd have to have the user to have to pass the ViewSide ID to
  the ViewMain, or do something hacky so that ViewMain can manipulate ViewSide
  when it's being dragged.
-->

2.html

<div>
  <ViewSide>
    <!-- side content -->
    <ViewMain></ViewMain>
  </ViewSide>
</div>

<!--
  This could work as well, but something about the extra nesting
  seems wrong to me.
-->

3.html

<SplitView>
  <View><!-- side content --></View>
  <View><!-- main content --></View>
</SplitView>

<!--
  SplitView would only accept two children, and would clone the Views
  to add specific styling for the side and main views.
  
  This has the advantage of giving a higher level controlling component.
-->