response-transition-group и Reaction-ab c (ab cjs) Midi не будет работать одновременно (зависит от ключа родительского компонента)?

Question

У меня есть небольшой проект React, в котором пользователь может добавлять заметки в строку, а затем воспроизводить MIDI-аудио добавленных заметок (используя Reaction-ab c / ab cjs ). Выбранные ноты также должны анимироваться, используя response-transition-group .

Моя проблема заключается в том, что только одна из этих функций (MIDI / анимация) будет работать одновременно, и какие одна работа зависит от родительских компонентов key свойство. Два ключа

key={rowIndex + rowNotation}
key={rowIndex}
// where `rowNotation` is the updated data of what the MIDI should play when every new card is added

/* If `key` = `rowIndex + rowNotation`, MIDI will play when green button is pushed, but
 react-transition-group will not perform an animation when adding / removing notes

 If `key` = `rowIndex`, react-transition-group will perform enter / exit
 animations, but react-abc MIDI will NOT play
*/

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

Но я не могу понять, почему MIDI перестает работать должным образом, когда ключ является просто индексом.

Мне потребовалось довольно много времени, чтобы понять, что ключ вызывает MIDI к хватит играть. Я попытался переместить компонент MIDI в разные места безрезультатно, и я довольно озадачен.

Я создал (надеюсь простую) рабочую изолированную программную среду моей проблемы с инструкциями для репликации: https://codesandbox.io/s/transition-group-x-abc-midi-bug-hunt-so-279pv?fontsize=14&hidenavigation=1&theme=dark

Я прокомментировал каждый основной компонент с информацией, но 2 наиболее важных компонента для моей проблемы:

Board.js: где ключ можно изменить, чтобы продемонстрировать проблема

CardRow.js: где расположены фактические компоненты react-abc / Midi и react-transition-group.

Answer 1

Мне нравится ваш пример, хорошая работа.

Это было большим открытием, когда я понял, как работает ключ в React. Позвольте мне объяснить вам, что здесь происходит.

Ключ говорит реагировать, если компонентное представление в dom используется повторно или нет. Если ключ остается прежним, он будет использован повторно. Если он изменится, он будет уничтожен и перемонтирован.

Так что, когда вы используете rowIndex в качестве ключа. Осталось то же самое, и анимация работает. Но почему-то Миди не обновляется. У Midi есть некоторые проблемы, я не знаю что.

Когда ключ меняется, CardRow перемонтируется, и это разрушает анимацию. Midi также перемонтирован и работает.

Мое решение состоит в том, что я использую rowIndex в качестве ключа. И я добавил RowNotation в качестве ключа к Midi. Только Midi будет перемонтирован. И анимация, и миди работают.

<Midi
  key={rowNotation}
  midiParams={{
    qpm: 80
  }}
  notation={rowNotation}
/>

https://codesandbox.io/s/transition-group-x-abc-midi-bug-hunt-so-rwjkk