CODEWITHSUNDEEP
javascriptreactjsexport
Horai Nuri
Horai Nuri

Reputation: 5578

How to nest children components into parent and export them?

The goal is to nest components and export theme while keeping the base as the default component.

Here's the result I want to produce.

import Panel from './Panel';
...

<Panel> // important as it contains its own CSS.
    <Panel.Head>
        <h2>Some Header Text</h2>
    </Panel.Head>

    <Panel.Body>
        <p>Some Content...</p>
    </Panel.Body>

    <Panel.Footer>
        <button>Confirm action...</button>
    </Panel.Footer>
</Panel>

I can't find a way to nest Head, Body, Footer into the parent Panel with JS exports.

This is what I have so far.

const Head = (props) => (
    <div className="panel--head">{props.children}</div>
);

const Body = (props) => (
    <div className="panel--body">{props.children}</div>
);

const Footer = (props) => (
    <div className="panel--footer">{props.children}</div>
);

const Panel = (props) => (
    <div className="panel">{props.children}</div>
);

export default Panel;
export { Head, Body, Footer };

What I tried will import into import Panel, { Head, Body, Footer } from './Panel'; which I'm trying to avoid.

Is this even possible? Any advice would be appreciated.

Upvotes: 0

Views: 38

Answers (1)

Lafi
Lafi

Reputation: 1342

What you're wanting to do is impossible Since we can't render a Component that could have subComponents like Component.SubComponentA, a workaround here is using the render props API which will allow to export each component separately and the Panel component to serve needed sub-components so here is the approach:

const PanelRP = (props) => (
  <div className="panel">{props.children({ Head, Body, Footer })}</div>
);

And we render it like below:

<PanelRP>
  {({ Head, Body, Footer }) => (
    <>
      <Head>head</Head>
      <Body>body</Body>
      <Footer>footer</Footer>
    </>
  )}
</PanelRP>

could this api solve your problem ?

Upvotes: 1

Related Questions