AutoScroll with react-sortable-hoc (Table)

Question

我一直在努力实现这个例子中提到react-sortable-hoc的例子页面，特别是与表内自动滚屏的行为。不幸的是，源代码看起来并不存在于存储库的示例目录中。

尽管我在下面的代码和框中实现的代码是一个非常简单的示例，但我已经为此倾注了数小时，使用useWindowAsScrollContainer和getContainer使用 refs，但似乎没有任何解决问题的方法。

也就是说，这是我注意到的行为：当滚动出容器，甚至出窗口时，自动滚动功能永远不会参与。我甚至使出回document.body与getContainer应限制容器，但似乎无法复制的行为所指出的资源库的例子。

此外，虽然我在SortableTable组件上指定了固定的高度和宽度<AutoSizer />，但理想情况下应该用 包裹，但暂时将其删除以消除任何副作用。

https://codesandbox.io/s/mysortabletable-zi94g?file=/MySortableTable.js

• react-sortable-hoc : 1.11.0
• 反应虚拟化：9.7.5

Answer 1

您需要向可排序组件提供容器，当sortableElement使用第三方库使用getContainerprop 进行渲染时，它必须限制该容器。

根据react-sortable-hoc文档：

getContainer是一个可选函数，用于返回可滚动容器元素。该属性默认为SortableContainer元素本身或（如果 useWindowAsScrollContainer为 true）窗口。使用此函数指定自定义容器对象（例如，这对于与某些第三方组件（例如 FlexTable）集成非常有用）。该函数传递一个参数（wrappedInstance React 元素），并且预计返回一个 DOM 元素。

现在，由于您无法将直接引用传递给子组件，因此您可以在将 Table 组件传递给 HOC 之前编写一个小包装器

const MyTable = ({ tableRef, ...rest }) => {
    return <Table ref={this.props.tableRef} {...rest} />;
}
const SortableTable = SortableContainer(MyTable);
const SortableTableRowRenderer = SortableElement(defaultTableRowRenderer);

/**
 * Define the table schema
 */
const schema = [
  { dataKey: "col1", label: "Column 1" },
  { dataKey: "col2", label: "Column 2" }
];

/**
 * Generate row data according to the schema above
 * @param {*} rowCount
 */
function generateRows(rowCount) {
  const rows = [];
  for (let i = 0; i < rowCount; i++) {
    rows.push({ col1: i, col2: i * i });
  }
  return rows;
}

class MySortableTable extends Component {
  state = {
    schema,
    rows: generateRows(200)
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ rows }) => ({
      rows: arrayMove(rows, oldIndex, newIndex)
    }));
  };

  rowRenderer = props => {
    return <SortableTableRowRenderer {...props} />;
  };

  getRow = ({ index }) => {
    const { rows } = this.state;
    return rows[index];
  };

  render() {
    const { rows, schema } = this.state;

    return (
      <SortableTable
        width={500}
        height={500}
        headerHeight={32}
        rowHeight={32}
        tableRef={ref => (this.tableRef = ref)}
        getContainer={() => ReactDOM.findDOMNode(this.tableRef.Grid)}
        rowCount={rows.length}
        rowGetter={this.getRow}
        onSortEnd={this.onSortEnd}
        rowRenderer={this.rowRenderer}
      >
        {schema.map(col => (
          <Column {...col} key={col.dataKey} width={100} />
        ))}
      </SortableTable>
    );
  }
}

工作演示