复选框输入无法与 React-Table 和 React-Window 组合一起正确显示

Question

我正在尝试结合来自 React-table 的 Row Selection and Virtualized Rows 示例，但复选框无法正确呈现，问题是当您单击它们时，您可以看到它们激活但是在您向上或向下滚动之前不会出现勾号，当您取消选中复选框时也会出现同样的情况。

我有一个工作示例here。

我认为这与 React-Window 更新或重新渲染 div 的方式有关，但我对如何解决这个问题一无所知，我们将不胜感激。

Answer 1

您的 SelectCheckbox 组件属性未正确更新，您必须将 selectedRowIds 添加为 的依赖项RenderRow 回调

const RenderRow = React.useCallback(
    ({ index, style }) => {
      const row = rows[index];
      prepareRow(row);
      return (
        <div
          {...row.getRowProps({
            style
          })}
          className="tr"
        >
          {row.cells.map((cell) => {
            return (
              <div {...cell.getCellProps()} className="td">
                {cell.render("Cell")}
              </div>
            );
          })}
        </div>
      );
    },
    [prepareRow, rows, selectedRowIds]
  );