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...

Respuestas a la pregunta(2)

Su respuesta a la pregunta