Mostrar / Ocultar componentes en ReactJS
Hemos estado experimentando algunos problemas al usar reaccionar ahora peroun poco se reduce a una parte de cómo hemos estado usando reaccionar.
¿Cómo deberíamos haber estado mostrando / ocultando componentes secundarios?
Así es como lo hemos codificado (estos son solo fragmentos de nuestros componentes) ...
_click: function() {
if ($('#add-here').is(':empty'))
React.render(<Child />, $('#add-here')[0]);
else
React.unmountComponentAtNode($('#add-here')[0]);
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
<div id="add-here"></div>
</div>
)
}
y últimamente he estado leyendo ejemplos como debería haber estado en algún lugar de esta línea:
getInitialState: function () {
return { showChild: false };
},
_click: function() {
this.setState({showChild: !this.state.showChild});
},
render: function() {
return(
<div>
<div onClick={this._click}>Parent - click me to add child</div>
{this.state.showChild ? <Child /> : null}
</div>
)
}
¿Debería haber estado usando ese React.render ()? Parece detener varias cosas comoshouldComponentUpdate
en cascada al niño y cosas comoe.stopPropagation
...