React CSSTransitionGroup удаленный элемент смещен до конца

Question

Я использую аддон CSSTransitionGroup, чтобы анимировать добавление и удаление элементов в массив. При добавлении анимация выполняется так, как ожидалось, но при удалении удаленный элемент сдвигается до конца до начала анимации. Я довольно новичок в React, но я предполагаю, что что-то происходит под капотом с тем, как React примиряет изменения массива?

http://jsfiddle.net/alalonde/0kztn19d

Answer 1

Ваше заявление удалить идет неправильно из-за РЕАКТ key конкретики. См. Пояснения here динамических компонентов (это то, что у вас есть) и способы их использования с помощью клавиши.

Чтобы восстановить, изменить return заявление в картировании детей к:

return <Item key={item} item={item}/>; 

И создать новый (чистый) компонент, названный <Item>:

var Item = React.createClass({ 
    render: function() { 
    return <div>{this.props.item}</div>; 
    } 
}); 

Я попробовал это в вашей скрипке и оно работает. Надеюсь, this link предоставит вам обновленную скрипку.

BTW: В соответствии со скрипкой мои изменения бывают быстрыми и грязными: реагируйте, ожидая, что ключи будут уникальными и связаны с содержимым элемента в списке. Мой пример удовлетворяет второму требованию (пожалуйста, НЕ используйте индекс отображения в качестве ключа), но он терпит неудачу в первом случае: если вы добавите, а затем удалите, а затем добавьте, код примера создаст следующий элемент с тем же номером (не единственный), поэтому он терпит неудачу.