1

Existe uma forma de eu passar um componente especializado para um filho por props?

Eu tenho uma situação onde eu quero reutilizar o máximo, sem precisar duplicar, e não entendi direito a melhor maneira de fazer isso. Basicamente eu tenho um card(widget) e dentro desse card tenho um body e ali eu quero carregar coisas diferentes dentro dele.

A ideia é quando usar o <base /> eu tenha uma props "type" onde eu passo o tipo do widget, assim ele carrega o icone referente ao que precisa e no body carrega o jsx referente ao type passado. Espero que tenha ficado claro, qualquer coisa me avisem pra eu tentar explicar melhor.

Exemplo, eu tenho um componente widget.jsx (que é composto por um widgetTitle.jsx, widgetBody.jsx e widgetFooter.jsx)

widget.jsx

<div>
    <widgetTitle />
    <widgetBody />
    <widgetFooter /> 
</div>

widgetTitle.jsx

<div>
    <i>icone</>
    <h2>{this.props.titulo}</h2>
</div>

widgetBody.jsx

<div>
  {this.props.body}
</div>

widgetFooter.jsx

<div>
   <footer>Qualquer coisa do footer</footer>
</div>

Tenho tb um componente especializado.jsx

<div>
    <i>icone</>
    <span>Status</span>
    <i>icone</>
    <span>Status</span>
    <button>On</button>
</div>

Depois eu posso usar o componente dessa maneira?

<base titulo="Meu Titulo" texto="Meu texto" body={Aqui carregar o especializado}/>

inserir a descrição da imagem aqui

1 Resposta 1

0

Voce pode usar props.children para pegar os elementos filhos:

const Base = React.createClass({
    render: function() {
        return <div>
                  <h1>{this.props.titulo}</h1>
                  <p>{this.props.texto}</p>
                  <div>{this.props.children}</div>
               </div>;
    }
});

const Especializado = React.createClass({
    render: function() {
        return <div>
                  <h2>{this.props.subTitulo}</h2>
                  <div>Qualquer coisa que vai ficar dentro do body do base</div>
                  <button>Entrar</button>
               </div>;
    }
});

ReactDOM.render(<Base titulo="teste" texto="teste"><Especializado subTitulo="teste" /></Base>, 
                document.getElementById('app'));

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 .