Official ReactJs documentation recommends to create components following the dot notation like the React-bootstrap library:
<Card>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
</Card.Body>
</Card>
It is very easy to create this structure with the help of a class component:
const CardBody = ({ children }) => <div className='body'>{children}</div>;
class Card extends Component {
static Body = CardBody;
render() {
return (
<div className='card'>{this.props.children}</div>
);
}
}
But it's also recommended to use as much as possible functional component. Unfortunately I don't know how to achieve this using only functional component.
If I follow this way, I'm no more able to use Card as a component because he is now an object of components:
const Card = {
Component: CardComponent,
Body: CardBody
}
export default Card
I'd have to use it that way, and it's not really what I want:
<Card.Component>
<Card.Body>
...
Do you have any idea how to do that?
In function component you can do like so:
// Card.react.js
const Card = ({ children }) => <>{children}</>;
const Body = () => <>Body</>;
Card.Body = Body;
export default Card;
// Usage
import Card from "./Card.react.js";
const App = () => (
<Card>
<Card.Body />
</Card>
);
Or, you can exploit named exports:
// Card.react.js
export const Wrapper = ({ children }) => <>{children}</>;
export const Body = () => <>Body</>;
// Usage
import * as Card from "./Card.react.js";
const App = () => (
<Card.Wrapper>
<Card.Body />
</Card.Wrapper>
);
const CardBody = ({ children }) => <div className='body'>{children}</div>;
const Card = (props) => (
<div className='card'>{props.children}</div>
);
Card.Body = CardBody
And then use it like
<Card>
<Card.Body>
....