我有一个相对标准的react表，其中的行可以选择 - 使用 HOC SelectTable 实现，很像react表提供的示例：

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组件，它播放作为props传递到组件中的声音文件。本质上它加载传入的 URL 并呈现一个声音播放器：

加载 url 之前（持续时间默认为 0:00）

然后在加载后以正确的持续时间渲染：

我面临的问题是，每当在我的表格中选择一行时，整个表格都会重新呈现（如果没有声音播放器，那就没问题了）——这意味着声音文件播放器会重置回 0:00 持续时间然后以正确的持续时间再次重新加载。这发生在每一行。

我的猜测是检查所有行的键以查看它们当前是否被选中，从而导致重新呈现整个表。

无论如何我只重新渲染选定的行 - 而不是整个表？我查看了https://reactjs.org/docs/state-and-lifecycle.html 以及其他一些 SO 帖子，但似乎不能只重新渲染受影响的行。或者甚至只是重新渲染带有复选框的列？