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

Question

我正在尝试组合 React-table 中的 Row Selection 和 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]
  );