0

Estou usando a versão 16.12.0 do react. Eu possuo um component funcional chamado Card e gostaria de inserir html dentro dele (gostaria de não mudar o código fonte dele).

Card:

function Card ({cardHeader, cardBody, cardDescription}){

return (
    <>
        <div className="card">
            <div className="card-header">
                <h1>{cardHeader}</h1>
                <p>{cardDescription}</p>
            </div>
            <div className="card-body">
                {cardBody}
            </div>
        </div>
    </>
)}

E gostaria de passar o html a mais pra dentro desse componente da seguinte forma:

 <Card cardHeader={cardTitle} cardBody={object} >
   <div className="card-close">
      ...
   </div>
 </Card>

Dessa forma, nos outros lugares que usam o component do card, não vão precisar de adaptações. Alguma idea ?

2 Respostas 2

2

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>

1

Vc precisa adicionar um HTML externo, certo?

Dá para usar o dangerouslySetInnerHTML

 <Card cardHeader={cardTitle} cardBody={object} >
   <div dangerouslySetInnerHTML={{ html: `
      <div className="card-close">
          ...
      </div>
   ` }} />
 </Card>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .