做一个React侧边栏，要能拖拽调节宽/高度，还要响应式？

需求

页面内容很多，需要一个侧边栏，可以关闭或打开（收缩或展开），宽度可以通过鼠标拖拽来调节，如下图：

由于用户的显示器尺寸差别较大，有的是宽曲面屏，有的是小屏笔记本，所以还要求在屏幕较小时，侧边栏会重叠在主内容之上的，像这样：

在重叠状态时，依然要能让用户拖着调节宽度。 还有一个进阶的需求是要能支持上下左右四个风向，还要能支持一个页面中有多个方向的这样的侧边栏。

实现

第一步，确定工具库

分屏我选用的工具库是：github.com/bvaughn/rea… 安装指令：npm install react-resizable-panels 组件库我用的MUI Design。

第二步，基础的分栏

根据工具库的文档，我们可以做一个基础的分栏，由于我们是要做一个可复用的组件SidePanel，我希望这个组件可以这样用：

// Page.tsx

<SidePanel
    sideContent={<Panel>right</Panel>}   // 侧边栏内容
    mainContent={<Panel>main</Panel>}   // main是位于中心的主位置
    direction="right" // 右边侧边栏
/>

那么在组件中应该这样写：

// SidePanel.tsx

type Props = {
    sideContent: React.ReactNode;
    mainContent: React.ReactNode;
    direction: "right";
}

const SidePanel = (props: Props) => {
    const { sideContent, mainContent, direction } = props;
    
    return (
        <PanelGroup direction="horizontal">
            {mainContent}
            {direction === "right" && <PanelResizeHandle />}
            {direction === "right" && sideContent}
        </PanelGroup>
    );
}

第三步，分栏支持水平和竖直方向

基础的分栏分为水平方向和竖直方向，我们的需要支持四个方向，组件可以这样写：

// SidePanel.tsx

type Props = {
    sideContent: React.ReactNode;
    mainContent: React.ReactNode;
    direction: "top" | "right" | "bottom" | "left";
}

const SidePanel = (props: Props) => {
    const { sideContent, mainContent, direction } = props;
    
    return (
        <PanelGroup direction={['top', 'bottom'].includes(direction) ? 'vertical' : 'horizontal'}>
            {['top', 'left'].includes(direction) && sideContent}
            {['top', 'left'].includes(direction) && <PanelResizeHandle />}
            {mainContent}
            {['bottom', 'right'].includes(direction) && <PanelResizeHandle />}
            {['bottom', 'right'].includes(direction) && sideContent}
        </PanelGroup>
    );
}

第四步，边界线样式调整

下面我把边界线中间的位置加上一个图标，再用CSS优化样式，这样激活状态会看上去更明显，像这样的效果：

那么这个边界线组件可以这样写：

// SidePanelResizeHandle.tsx

import DragHandleIcon from '@mui/icons-material/DragHandle';
import { styled } from '@mui/material/styles';
import React from 'react';
import { PanelResizeHandle } from 'react-resizable-panels';

const StyledPanelResizeHandle = styled(PanelResizeHandle, {
  shouldForwardProp: prop => prop !== 'direction',
})<{ direction: 'top' | 'bottom' | 'left' | 'right' }>(
  ({ direction, theme }) => {
    return {
      backgroundColor: theme.palette.line.light,
      width: ['left', 'right'].includes(direction) ? 1 : '100%',
      height: ['top', 'bottom'].includes(direction) ? 1 : '100%',
      transition: theme.transition,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      '&[data-resize-handle-state="drag"], &[data-resize-handle-state="hover"]':
        {
          cursor: ['left', 'right'].includes(direction)
            ? 'ew-resize'
            : 'ns-resize',
          backgroundColor: theme.palette.primary.light,
          width: ['left', 'right'].includes(direction) ? 3 : '100%',
          height: ['top', 'bottom'].includes(direction) ? 3 : '100%',
        },
      '& .MuiSvgIcon-root': {
        transform: {
          top: 'translateY(6px)',
          bottom: 'translateY(-6px)',
          left: 'rotate(90deg) translateY(-6px)',
          right: 'rotate(90deg) translateY(6px)',
        }[direction],
        transformOrigin: 'center',
        color: theme.palette.line.light,
      },
    };
  }
);

type Props = {
  direction: 'top' | 'bottom' | 'left' | 'right';
};

const SidePanelResizeHandle = (props: Props) => {
  const { direction } = props;

  return (
    <StyledPanelResizeHandle direction={direction}>
      <DragHandleIcon />
    </StyledPanelResizeHandle>
  );
};

export default SidePanelResizeHandle;

同时在组件中，PanelResizeHandle也要相应地改成SidePanelResizeHandle。这样，我们就可以在四个方向上都能看到上图的效果。

第五步，响应式，小屏时是覆盖的样式

我们通过可以通过useMediaQuery得出我们是什么需要判断屏幕是否足够大。在小屏时，原本显示在main pane的内容需要以absolute的位置铺满整个容器，现在的main pane将是一个空白的占位空间，会被压在底下，而side panel则会在最上层。

// Panel.tsx

import { styled } from '@mui/material/styles';
import * as React from 'react';
import { Panel } from 'react-resizable-panels';

const StyledEmptyMainPanel = styled(Panel)(({ theme }) => ({
  background: 'transparent',
  zIndex: '0 !important',
}));

export const EmptyMainPanel = () => {
  return <StyledEmptyMainPanel />;
};

export const StyledMainPanel = styled(Panel)(({ theme }) => ({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  zIndex: '0 !important',
}));

export const StyledPanel = styled(Panel)(({ theme }) => ({
  backgroundColor: 'rgba(255, 255, 255, 0.8)',
  backdropFilter: 'blur(4px)',
}));

// SidePanel.tsx

import { styled, useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import React from 'react';
import { PanelGroup } from 'react-resizable-panels';
import { EmptyMainPanel, StyledMainPanel } from './Panel';
import SidePanelResizeHandle from './SidePanelResizeHandle';

const StyledPanelGroup = styled(PanelGroup)(({ theme }) => ({
  position: 'relative',
  '& div[data-panel], & div[data-resize-handle]': {
    zIndex: 1,
  },
}));

type Props = {
  mainContent: React.ReactNode;
  sideContent: React.ReactNode;
  direction: 'top' | 'right' | 'bottom' | 'left';
};

const SidePanel = (props: Props) => {
  const { mainContent, sideContent, direction } = props;

  const theme = useTheme();
  const wideScreen = useMediaQuery(theme.breakpoints.up('md'));
  
  return wideScreen ? (
    <PanelGroup
      direction={
        ['top', 'bottom'].includes(direction) ? 'vertical' : 'horizontal'
      }
    >
      {['top', 'left'].includes(direction) && sideContent}
      {['top', 'left'].includes(direction) && (
        <SidePanelResizeHandle direction={direction} />
      )}
      {mainContent}
      {['right', 'bottom'].includes(direction) && (
        <SidePanelResizeHandle direction={direction} />
      )}
      {['right', 'bottom'].includes(direction) && sideContent}
    </PanelGroup>
  ) : (
    <StyledPanelGroup
      direction={
        ['top', 'bottom'].includes(direction) ? 'vertical' : 'horizontal'
      }
    >
      {['top', 'left'].includes(direction) && sideContent}
      {['top', 'left'].includes(direction) && (
        <SidePanelResizeHandle direction={direction} />
      )}
      {<EmptyMainPanel />}
      {['right', 'bottom'].includes(direction) && (
        <SidePanelResizeHandle direction={direction} />
      )}
      {['right', 'bottom'].includes(direction) && sideContent}
      {!wideScreen && (
        <StyledMainPanel>{mainContent?.props?.children}</StyledMainPanel>
      )}
    </StyledPanelGroup>
  );
};

export default SidePanel;

这样我们来看看小屏时是什么样子的：

大功告成

通过const wideScreen = useMediaQuery(theme.breakpoints.up('md'))我们可以设置多小算小屏模式，多大算大屏模式，两种模式都可以通过拖拽调节宽度或高度，如果需要多个分栏，可以在mainContent里写嵌入式的分栏组件就好啦。