Skip to main content
adicionou 797 caracteres ao conteúdo
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

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>

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>
        </>
    )
}

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>

Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

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>
        </>
    )
}