);};exportdefaultResizableCol;.container{位置：相对；高度：100%；}.divider{位置：绝对；顶部：0；底部：0；宽度：1px；高度：100%；背景色：#000；游标：col-resize；z-index:1;}.block{位置:绝对;顶部：0；底部：0;}.leftside{左：0;背景颜色：#ddd;}.rightside{右：0;background-color:#bbb;}添加交互，优化样式实现样式后，为组件添加相关交互代码，主要是为onMouseDown/onMouseMove/onMouseUp添加相应的事件处理函数其中：onMouseDown：记录用户同时，如果发现onMouseUp没有正常触发，则调用相关的处理函数handleMouseUp。onMouseMove：根据用户当前鼠标位置计算左右栏的宽度和分界线的位置。onMouseUp：清除数据。另外，onMouseMove和onMouseUp事件是由外层容器元素处理的，主要是因为当用户快速滑动鼠标时，如果鼠标离开了分界线元素，那么这两个事件就不会继续触发，因为分界线非常快。窄，只有几个像素宽，所以这种情况极有可能发生，所以这两个事件需要提升到父容器去处理。//记录点击的开始位置conststartXRef=useRef(null)//记录左列的宽度const[width,setWidth]=useState(100);//当分割线开始移动时，记录此时左列的宽度constoldWidthRef=useRef(100);//onMouseDown处理函数consthandleMouseDown=useCallback((e:React.MouseEvent)=>{if(e.button===0){if(startXRef.current!==null){handleMouseUp(e);}startXRef.current=e.clientX;}},[]);//onMouseMove处理程序consthandleMouseMove=useCallback((e:React.MouseEvent)=>{if(startXRef.current===null){return;}setWidth(e.clientX-startXRef.current+oldWidthRef.current);},[])//onMouseUp处理程序consthandleMouseUp=useCallback((e:React.MouseEvent)=>{if(e.button===0){startXRef.current=null;oldWidthRef.current=width;}},[width])返回(=null?'col-resize':'default'}}>