ReangeCSSTransitionGroup переупорядочивает элементы во время удаления/добавления

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.