封装组件的目的是可以以组件化的方式使用PanelResize，但是所有的状态依然托管在原生js类中，不需要React的状态管理
在useEffect中初始化PanelResize类，并传递参数
1function PanelGroup(props) {
2 const parentEle = useRef(null);
3 const { direction, children, customCursor, panelRef = { current: undefined }, autoSaveId, className } = props;
4
5 useEffect(() => {
6 const panelEles = Array.from(children).filter(child => {
7 return child?.type === Panel;
8 });
9 const panelSizeData = Array.from(panelEles).map((child) => {
10 const { defaultSize, minSize, maxSize } = child.props;
11 return {
12 minSize, defaultSize, maxSize
13 }
14 });
15
16 panelRef.current = new PanelResize(parentEle.current, { sizeData: panelSizeData, direction, customCursor, autoSaveId });
17 }, []);
18
19 return <div ref={parentEle} className={`wrapper ${className || ''}`}>{children}</div>
20}1function Panel (props) {
2 const { children, className } = props;
3 return <div className={`panel-resize ${className}`}>{children}</div>
4
5}
6export default Panel;1function PanelResizeHandle(props) {
2 const { className } = props;
3 return <div className={`handle-resize ${className}`}>
4
5 </div>
6}
7export default PanelResizeHandle;