How do I handle transclusion? child elements?

[elmarsto]

Hi all,

I want to use react-split-pane to do a three-pane vertical layout.

If I was working in pure React, it would look something like:

<threepanes>
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</threepanes>

But we're using react-phoenix (which is awesome, thank you!)

But in react-phoenix I can't figure out how to pass child elements.

The best I've managed to figure out is:

But this seems like a bit of a kluge; I also have to fake transclusion into the React shadow dom, which turns out to be bizarrely complex.

What's the most idiomatic way of solving this?

[scmx]

Hi @liz-mars. I don't think this is something to be fixed in react-phoenix.
I think you can achieve what you want by doing the following:

A simple react component for each use case you have

const MyThreePageLayout = () => (
  <threepanes>
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
  </threepanes>
)

const MyOtherThreePageLayout = () => (
  <threepanes>
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
  </threepanes>
)

Mount them with minimal code using react-phoenix.

<%= react_component "MyThreePageLayout", some: "prop" %>

<%= react_component "MyOtherThreePageLayout", some: "other prop" %>

[geolessel]

@liz-mars I believe @scmx is correct in his comment. Please let us know if that worked for you.

[elmarsto]

Yep, this is basically the sol'n I came to. The one I proposed initially, BTW, effs up the shadow DOM and reconciliation.

[elmarsto]

That said, being able to pass other react components as children would be a neat enhancement of react_phoenix