Question

n React Js我渲染了很多照片组件。

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

};

我想在点击它之后隐藏Photo组件并在单击按钮后显示组件。

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

Answer 1

我为您准备了一个Demo来实现您的目标，您可以参考下面提到的URL http://plnkr.co/edit/wFUtCfOYqTYfUFTn1sBk?p=preview

fields_for

按键隐藏/显示组件

1 个答案: