Inyoung Kim 김인영
Inyoung Kim 김인영

Reputation: 1586

Import child component package with parent component package

I've seen some components used like example below

import Parent from 'Parent';

<Parent.Child/>
...or...
<Parent>
    <Parent.Child/>
</Parent>

How should I structure the package so that I can do this? Plus what should I call such structure?

Upvotes: 1

Views: 56

Answers (1)

Jayce444
Jayce444

Reputation: 9063

Answer is in Here.

TL;DR, the parent is a regular component and the children are static properties of the parent class

If you want to do it for functional components, you can do something like:

function Child() {
  return <div>this is a child</div>
}

function Parent() {
  return <div>this is a parent</div>
}

Parent.Child = Child;  // assign the child as a property of the parent function

function App() {
  return (
    <div className="App">
      <Parent/>
      <Parent.Child/>
    </div>
  );
}

Upvotes: 2

Related Questions