La documentación oficial de ReactJs recomienda crear componentes siguiendo la notación de puntos como la biblioteca React-bootstrap :
<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>Es muy fácil crear esta estructura con la ayuda de un componente de clase:
const CardBody = ({ children }) => <div className='body'>{children}</div>; class Card extends Component { static Body = CardBody; render() { return ( <div className='card'>{this.props.children}</div> ); } }Pero también se recomienda usar tanto como sea posible el componente funcional. Desafortunadamente, no sé cómo lograr esto usando solo un componente funcional.
Si sigo de esta manera , ya no podré usar Card como componente porque ahora es un objeto de componentes:
const Card = { Component: CardComponent, Body: CardBody } export default CardTendría que usarlo de esa manera, y no es realmente lo que quiero:
<Card.Component> <Card.Body> ...¿Tienes alguna idea de cómo hacer eso?
En el componente de función, puede hacer lo siguiente:
// 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> );O bien, puede explotar las exportaciones con nombre:
// 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 = CardBodyY luego úsalo como
<Card> <Card.Body> ....