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

Question

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

在删除的情况下，所有剩余的项目都被移到顶部，而被删除的项目则向下移动以进行动画处理。例如，假设一个包含三个项目的列表：x、y 和 z。过滤器突然过滤掉 x 和 z，留下 y。项目 y 放入 x 的盒子，x 放入 y 的盒子，然后后两个盒子做动画。

在加法的情况下，项目按排序顺序放置，现有框由排序列表的前n个项目填充，然后其余项目在其下方获得动画框。在我们的 x、y、z 列表示例中，假设 x 和 z 已经被过滤掉，并且唯一显示的项目是 y。去掉filter后，x取y的box，下面创建两个box，分别填充y和z。

这是我的代码的 sn-p：

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 属性。