Reputation: 1586
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
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