У меня есть относительно стандартная таблица реагирования со строками, которые можно выбрать - реализовать с помощью HOC SelectTable, так же, как в примере с таблицей реагирования:
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, являющимся компонентом Reaction-player , который воспроизводит звуковой файл, переданный в компонент в качестве реквизита. По сути, он загружает переданный URL и воспроизводит звуковой проигрыватель:
Перед загрузкой URL (с продолжительностью по умолчанию 0:00)
Затем рендеринг с правильной продолжительностью после загрузки:
Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда в моей таблице выбирается строка , вся таблица перерисовывается (что было бы хорошо, если бы не было звукового проигрывателя), то есть звуковой файл. проигрыватель возвращается к 0:00 продолжительности, а затем снова загружается с правильной продолжительностью. И это происходит для каждого ряда.
Я предполагаю, что все ключи строки проверяются, чтобы убедиться, что они выбраны в настоящий момент, что приводит к повторному рендерингу всей таблицы.
В любом случае, я могу перерисовать только выбранную строку, а не всю таблицу? Я посмотрел на https://reactjs.org/docs/state-and-lifecycle.html
а также несколько других SO-постов, но, похоже, они не могут перерисовать только затронутую строку. Или даже просто заново визуализировать столбец с флажком?