antd的可伸缩列用hooks重构后难用的坑

在使用Ant Design的Table组件时，如果你尝试使用React Hooks来重构可伸缩列的功能，可能会遇到的一个问题是如何在不使用class组件的情况下管理状态。这里提供一个简化的例子，展示如何使用React Hooks来创建一个可伸缩列的表格。

import React, { useState } from 'react';
import { Table, Button } from 'antd';
 
const ResizableTable = () => {
  const [columns, setColumns] = useState([
    {
      title: 'Name',
      dataIndex: 'name',
      width: 200,
      resizable: true,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      width: 200,
      resizable: true,
    },
    // 更多列...
  ]);
 
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
    },
    // 更多数据...
  ];
 
  // 用于更新列宽的函数
  const handleResize = index => (e, { size }) => {
    const nextColumns = [...columns];
    nextColumns[index] = {
      ...nextColumns[index],
      width: size.width,
    };
    setColumns(nextColumns);
  };
 
  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        components={{
          header: {
            cell: ResizableTitle,
          },
        }}
      />
      {/* 添加一个按钮用于重置列宽 */}
      <Button onClick={() => setColumns(initialColumns)}>Reset Columns</Button>
    </div>
  );
};
 
// 可伸缩列的组件
const ResizableTitle = ({ onResize, width, ...restProps }) => {
  return (
    <th
      {...restProps}
      style={{
        width,
        resize: 'both',
        overflow: 'auto',
      }}
      onMouseDown={e => {
        const style = e.currentTarget.style;
        const startX = e.clientX;
        const startWidth = parseInt(style.width, 10);
 
        function resize(e) {
          const currentX = e.clientX;
          const diffX = currentX - startX;
          const newWidth = startWidth + diffX;
          style.width = `${newWidth}px`;
        }
 
        function stopResize() {
          document.removeEventListener('mousemove', resize);
          document.removeEventListener('mouseup', stopResize);
        }
 
        document.addEventListener('mousemove', resize);
        document.addEventListener('mouseup', stopResize);
      }}
    />
  );
};
 
export default ResizableTable;

在这个例子中，我们定义了一个名为ResizableTitle的组件，它处理列宽的调整。我们使用useState钩子来管理列的状态，并且通过一个简单的handleResize函数来更新列宽。这个例子提供了一个基本框架，你可以根据自己的需求进一步扩展和定制。