Você pode acessar através da prop children
. Por exemplo:
<Card cardHeader={cardTitle} cardBody={object}>
<div className="card-close"></div> // Essa div é o "children"
</Card>
E no componente <Card>
:
function Card ({children, cardHeader, cardBody, cardDescription}){
return (
<>
<div className="card">
<div className="card-header">
<h1>{cardHeader}</h1>
<p>{cardDescription}</p>
</div>
<div className="card-body">
{cardBody}
{children} // Exibe o que foi passado como "children"
</div>
</div>
</>
)
}
Veja um exemplo prático:
function Componente({ children }) {
return <div style={{backgroundColor:'red', height: '100px'}}>{children}</div>
}
function Pai() {
return (
<Componente>
<h1>Qualquer HTML</h1>
<p>Pode ser passado aqui</p>
</Componente>
)
}
ReactDOM.render(<Pai />, document.querySelector('#container'));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>