Reactjs 按键隐藏/显示组件

我已经渲染了很多照片组件

class PhotoList extends Component {
render() {
    return (

        <div className="content">           
            { _.map(this.props.photos, function(photo) { return ([<Photo key={photo.Id} data={photo} />, ' ']); }) }
        </div>
    );
}};


class Photo extends Component {
selectPhoto() {

}
EditPhoto() {

}
DetachPhoto() {

}
stopPropagation(e) {

}

dragStart() {

}

render () {
    var tooltip = (
        <Tooltip>
            <div className="text-nowrap">
                <span className="glyphicon glyphicon-plus"></span> {createdAt} / {this.props.data.CreatedBy}
                <br />
                <span className="glyphicon glyphicon-pencil"></span> {modifiedAt} / {this.props.data.ModifiedBy}
            </div>
        </Tooltip>
    );
    return (
        <div onClick={this.selectPhoto.bind(this)} draggable='true' onDragStart={this.dragStart.bind(this)} className={classNames('thumbnail', { selected: this.props.photo.Selected })}>
            <div className="photo">
                <span className="helper"></span>
                <img src={'' + this.props.data.PId + '.jpg'} />
                <ul className="list-inline photo-toolbar" onClick={this.stopPropagation.bind(this)}>
                    <li><span title="Edit" className="glyphicon glyphicon-pencil" onClick={this.EditPhoto.bind(this)}></span></li>
                    <li><span title="Detach" className="glyphicon glyphicon-minus" onClick={this.DetachPhoto.bind(this)}></span></li>
                    <li>
                        <OverlayTrigger placement='bottom' overlay={tooltip}>
                            <span className="glyphicon glyphicon-tag" />
                        </OverlayTrigger>
                    </li>
                    <li><a href={'https:www.fgdfg/' + this.props.data.PId + '.jpg' } target="_blank"><span title="Full size" className="glyphicon glyphicon-resize-full"></span></a></li>
                </ul>
            </div>
        </div>
    );
}

类照片列表扩展组件{
render（）{
返回(
{{{.map（this.props.photos，函数（photo）{return（[，''）；}）}
);
}};
类照片扩展组件{
选择照片（）{
}
编辑照片（）{
}
照片（{
}
停止广播（e）{
}
dragStart（）{
}
渲染（）{
变量工具提示=(
{createdAt}/{this.props.data.CreatedBy}


{modifiedAt}/{this.props.data.ModifiedBy}
);
返回(







);
}

})

我想隐藏照片组件后，点击它和显示组件后，点击一个按钮

---

我尝试使用React.unmountComponentAtNode（）函数，但我不知道如何使用正确的键选择Photo ComponentNet。

我为您准备了一个演示，以实现您的目标，您可以参考下面提到的URL

var HideMe=React.createClass({
隐藏：函数（事件）
{
所选变量=$（event.target）[0].id；
$（“#”+选中）。removeClass（'show'）；
$（“#”+选中）。addClass（'hide'）；
},
显示：功能（事件）
{
所选变量=$（event.target）[0].id；
$（“#”+选中）。removeClass（'hide'）；
$（“#”+选中）。addClass（'show'）；
},
render:function（）
{
返回(
单击我隐藏
单击我隐藏
)
}
});
反应(
,
document.getElementById（'示例'）
);

能否在此处添加照片组件代码？

 var HideMe=React.createClass({
  Hide:function(event)
  {
    var Selected=$(event.target)[0].id;
     $("#"+Selected).removeClass('show');
    $("#"+Selected).addClass('hide');
  },
  Show:function(event)
  {
    var Selected=$(event.target)[0].id;
     $("#"+Selected).removeClass('hide');
    $("#"+Selected).addClass('show');
  },
  render:function()
  {
    return(
      <div>
      <div>
       <span id="1" onClick={this.Hide}>Click me to Hide</span>
        <input type="button" id="1" value="Show" onClick={this.Show}/>
      </div>
     <div>
      <span id="2" onClick={this.Hide}>Click me to Hide</span>
        <input type="button" id="2" value="Show" onClick={this.Show} />
     </div>
      </div>

      )
  }
});
React.render(
  <HideMe />,
  document.getElementById('example')
);