Pass component to child

Question

Pass component to child

Navigation

#1 by (0 votes)

1

Is there a way I can pass a specialized component to a child by props?

I have a situation where I want to reuse the maximum without duplicating, and I did not understand the right way to do it. Basically I have a card (widget) and inside that card I have a body and there I want to load different things inside it.

The idea is when to use <base /> I have a props "type" where I pass the widget type, so it loads the icon referring to what it needs and in the body it loads the jsx referring to the last type. I hope it's clear, anything let me know so I can explain it better.

Example, I have a widget.jsx component (which consists of a widgetTitle.jsx, widgetBody.jsx and 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>

I have tb a specialized component.jsx

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

Then can I use the component in this way?

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

react

asked by anonymous 21.03.2018 / 18:46

1 answer

Image Paralax does not appear apple device (IOS) validate forms in function of select

score 0 · Accepted Answer

You can use props.children to fetch child elements:

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'));