У меня есть относительно стандартная таблица ответов со строками, которые можно selected - реализовано с использованием HOC SelectTable, как и в примере response-table:
https://github.com/tannerlinsley/react-table/blob/v6/docs/src/examples/selecttable/index.js
Ключевое различие в том, что одна из моих колонок - это настраиваемый компонент:
const columns = [
{
...other columns...
{
Header: "Sound file",
accessor: "sound_file",
Cell: props => {
return <SoundFilePlayer url={props.row.sound_file_url} />;
},
minWidth: 80
}
];
Компонент SoundFilePlayer является компонентом react-player, который воспроизводит звуковой файл, переданный в компонент как опора. По сути, он загружает переданный URL и отображает звуковой проигрыватель:
Перед загрузкой URL (с продолжительностью по умолчанию 0:00)
Затем после загрузки выполняется рендеринг с правильной продолжительностью:
Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда в моей таблице выбирается строка, вся таблица перерисовывается (что было бы нормально, если бы не было звукового проигрывателя), то есть проигрыватель звуковых файлов сбросить до 0:00 продолжительности, а затем перезагрузить еще раз с правильной продолжительностью. И это происходит для каждой строки.
Я предполагаю, что все ключи строки проверяются, чтобы увидеть, выбраны ли они в настоящее время, что приводит к повторному рендерингу всей таблицы.
В любом случае, я повторно визуализирую только выбранную строку, а не всю таблицу? Я просмотрел https://reactjs.org/docs/state-and-lifecycle.html, а также несколько других сообщений SO, но, похоже, не могут только повторно отобразить затронутую строку. Или даже просто повторно отрисовать столбец с флажком?
