源于布局需求，要求Antd的Layout组件中，侧边栏Sider可以拖拽改变宽度……

开源插件，基于react-draggable插件（同一作者），详见《react-resizable》；

    // 拖拽回调参数 size:{width,height}
    type ResizeCallbackData = {
        node: HTMLElement,
        size: {width: number, height: number},
        handle: ResizeHandleAxis
    };
    // 拖拽句柄的类型，对应单词 south | west | east | north 首字母
    type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

    type ResizableProps =
    {
        children: React.Element<any>,
        width: number, // 元素宽度，必填项
        height: number,  // 元素高度，必填项
        // 自定义拖拽句柄元素
        handle: ReactElement<any> | (resizeHandle: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,   
        handleSize: [number, number] = [10, 10],
        lockAspectRatio: boolean = false, // 是否开启等比缩放
        axis: 'both' | 'x' | 'y' | 'none' = 'both', // 改变轴
        minConstraints: [number, number] = [10, 10], // 元素最小尺寸
        maxConstraints: [number, number] = [Infinity, Infinity], // 元素最大尺寸，默认无限
        onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, // 开始拖拽触发
        onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, // 结束拖拽触发
        onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, // 拖拽时触发
        draggableOpts?: ?Object, // react-draggable 配置项，需要注意仅限 <DraggableCore>
        resizeHandles?: ?Array<ResizeHandleAxis> = ['se'] // 重要，此属性定义当前可拖拽句柄的类型，决定 size 结果
    };

使用：

    <Resizable 
      width={dragWidth}
      height={0}
      axis="x"
      resizeHandles={['w']} // 拖拽左侧
      onResize={(e, { size }) => {
        let { width } = size; 
        setDragWidth(width);
      }} 
    >
      <Sider width={dragWidth} {...restProps} />
    </Resizable>

开发过程中遇到个问题，当拖拽过程遇到iframe会出现卡顿，该问题不是插件问题，而是原生问题，当鼠标移入iframe会触发iframe的鼠标事件导致卡顿，解决思路有两种，一个是在拖拽过程中给iframe加一层遮罩，另一个是利用插件根节点样式类名通过css禁用iframe鼠标事件，推荐第二种。

// 样式类名 react-draggable-transparent-selection 会在拖拽时添加到#root节点
.react-draggable-transparent-selection iframe {
  pointer-events: none;
}