TypeScript 中的 Antd 可调整大小的表列

Question

我正在实现antd<Table> 组件，需要使用react-resizable 调整列的大小。 我按照documentation 中的示例进行操作，但是由于我的项目使用 TypeScript 并使用功能组件，因此我不得不对其进行重构，并且遇到了打字问题。 当我尝试从示例中实现 onHeaderCell 时：

const initialColumns: ColumnProps<Row>[] = myData.columns.map((column, index) => {
  return {
    ...
    onHeaderCell: (c: ColumnType<Row>) => ({
          width: c.width,
          onResize: handleResize(index),
        }),
    ...
  })

我收到此错误：

... 'onHeaderCell(...)' 返回的类型在这些类型之间不兼容。 输入'{宽度：字符串|号码 |不明确的; onResize: (e: SyntheticEvent, resizeData: ResizeCallbackData) => void; }' 与类型 'HTMLAttributes' 没有共同的属性。

我的handleResize 看起来像这样：

const handleResize = (index: number) => (e: React.SyntheticEvent<Element, Event>, resizeData: ResizeCallbackData) => {
    const { size } = resizeData
    updateColumns((cols) => {
      const nextColumns = [...cols]
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      }
      return nextColumns
    })
  }

我已将ResizableTitle 移动到单独的组件中，<Table /> 以这种方式实现

const components = {
    header: {
      cell: ResizableTitle,
    },
  }

  return (
    <Table
      bordered
      components={components}
      columns={columns} // columns come from the useState<ColumnProps<Row>[]>()
      ...
    />
  )

如何更改此设置以获得所需的结果？

Answer 1

所以我找到了一个不使用react-resizable的解决方案

const [resizingColumnIndex, _setResizingColumnIndex] = useState<number>();
const resizingColumnIndexRef = useRef(resizingColumnIndex);
  
const setResizingColumnIndex = (index: number | undefined) => {
    resizingColumnIndexRef.current = index;
    _setResizingColumnIndex(index);
};

const resizeListener = (e: MouseEvent) => {
  if (resizingColumnIndexRef.current) {
    handleResize(resizingColumnIndexRef.current, e.movementX);
  }
  window.onmouseup = (e: MouseEvent) => {
    window.removeEventListener("mousemove", resizeListener);
    setResizingColumnIndex(undefined);
  };
};

在我要添加的每一列标题中

<div
  className="resizeHandle"
  onMouseDown={() => {
    setResizingColumnIndex(index);
    window.addEventListener("mousemove", resizeListener, { passive: true });
  }}
/>

风格

  .resizeHandle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -5px;
    cursor: col-resize;
    z-index: 5;
  }

最后是 handleResize 函数，用于更新保持在组件状态中的列

  const handleResize = (index: number, delta: number) => {
    updateColumns(prevColumns => {
      const indexNewWidth = Number(prevColumns[index].width) + delta;
      const nextWidth = indexNewWidth >= MIN_COLUMN_WIDTH ? indexNewWidth : MIN_COLUMN_WIDTH;
      return prevColumns.map((col, i) => (i === index ? { ...col, width: nextWidth } : col));
    });
    setTableWidth(prevWidth => prevWidth + delta);
  };