Mostrar / ocultar componentes no ReactJS

Estamos enfrentando alguns problemas no uso do reagir agora, masmeio resume-se a uma parte de como estamos usando o reagir.

Como devemos mostrar / ocultar componentes filhos?

É assim que codificamos (são apenas trechos de nossos 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>
  )
}

e ultimamente tenho lido exemplos como se devessem estar em algum lugar nesse sentido:

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>
  )
}

Eu deveria estar usando esse React.render ()? Parece parar várias coisas comoshouldComponentUpdate cascata para criança e coisas comoe.stopPropagation...

questionAnswers(2)

yourAnswerToTheQuestion