如何使用 react-sortable-hoc（表格）自动滚动？

Question

我一直在努力实现this example 示例页面中提到的this example，特别是表格中的自动滚动行为。不幸的是，看起来源代码并不存在于存储库的示例目录中。

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

也就是说，这是我注意到的行为：当滚动出容器，甚至滚动出窗口时，自动滚动功能永远不会启用。我什至诉诸于使用 getContainer 返回 document.body，这应该会限制容器，但似乎无法复制 the repository's example 中所述的行为。

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

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

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

Answer 1

当使用 3rd 方库使用 getContainer 属性进行渲染时，您需要将容器提供给必须限制 sortableElement 的可排序组件。

根据 react-sortable-hoc 文档：

getContainer 是返回可滚动容器元素的可选函数。这 属性默认为 SortableContainer 元素本身或（如果 useWindowAsScrollContainer 为真）窗口。使用此功能 指定一个自定义容器对象（例如，这对于集成很有用 某些 3rd 方组件，例如 FlexTable）。这个功能是 传递了一个参数（wrappedInstance React 元素），它 预计会返回一个 DOM 元素。

现在，由于您无法将直接 ref 传递给子组件，因此您可以在 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>
    );
  }
}

Working demo