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

Question

我正在尝试结合 React-table 中的Row Selection和Virtualized Rows示例，但复选框未正确呈现，问题是当您单击它们时，您可以看到它们已激活，但直到您向上滚动才会出现刻度线或向下，当您取消选中复选框时也会发生同样的情况。

我在这里有一个工作示例。

我认为这与 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]
  );