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

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