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

}

import React, { useState } from ‘react’

import { Resizable } from ‘react-resizable’

import classnames from ‘classnames’

const ResizeableTitle = (props) => {

const { onResize, width, …restProps } = props

// 添加偏移量

const [offset, setOffset] = useState(0)

if (!width) {

return <th {…restProps} />

}

return (

<Resizable

// 宽度重新计算结果，表头应当加上偏移量，这样拖拽结束的时候能够计算结果；

// 当然在停止事件再计算应当一样，我没试过（笑）

width={width + offset}

height={0}

handle={

<span

// 有偏移量显示竖线

className={classnames([‘react-resizable-handle’, offset && ‘active’])}

// 拖拽层偏移

style={ { transform: translateX(${offset}px) }}

onClick={(e) => {

// 取消冒泡，不取消貌似容易触发排序事件

e.stopPropa