javascript - ReactCSSTransitionGroup 在删除/添加期间重新排序项目

Question

我有一个 Bootstrap 列表组，其中包含多个项目和一个过滤器文本框。当同时在组中添加或删除多个项目时，这些项目会重新排序。

在删除的情况下，所有剩余的项目都会移到顶部，而删除的项目会向下移动以实现动画。例如，假设有一个包含三个项目的列表:x、y 和 z。过滤器突然过滤掉 x 和 z，只留下 y。项目 y 被放置到 x 的盒子中，x 被放置到 y 的盒子中，然后后两个盒子执行动画。

在附加情况下，项目按排序顺序放置，现有框由排序列表的前 n 个项目填充，然后其余项目在其下方显示动画框。在我们的 x、y、z 列表示例中，假设 x 和 z 已被过滤掉，唯一显示的项目是 y。当过滤器被移除时，x占据了y的盒子，下面创建了两个盒子并填充了y和z。

这是我的代码片段:

render() {
    let tables = this.state.tables;
    let items = [];

    for (let i in tables) {
        let table = tables[i],
            tableName = table.name,
            tableId = encodeURIComponent(tableName.replace(/\s+/g, '-')),
            isTableSelected = this.state.selectedTable && table.name === this.state.selectedTable.name,
            show = tableMatchesFilter(table));

        if (show) {
            items.push(
                <div> {/* wrap in div so we don't have to deal with animating padding */}
                    <ListGroupItem 
                        className={classNames('list-group-item', {'active': isTableSelected })}
                        onClick={this.handleTableSelect.bind(this, tableId)}
                        itemKey={tableId} key={tableId} style={{whiteSpace: 'pre'}}
                        header={tableName}>
                        {table.description}
                    </ListGroupItem>
                </div>
            );
        }
    }

    return ( {/* ... */}
         <div ref='tableListGroup' className='list-group col-xs-12'>
            <ReactCSSTransitionGroup transitionName='tableListGroup'>
                {items}
            </ReactCSSTransitionGroup>
        </div>
        {/* ... */}
    );
}

我正在尝试找出如何让元素留在盒子里并让正确的盒子出现/消失。

Answer 1

确保您的items 的每个div 都有唯一的key 属性。