当前位置：首页 > React

react实现分屏

2026-01-26 14:09:18React

实现分屏的基本思路

在React中实现分屏效果通常涉及将界面划分为多个独立区域，每个区域可独立渲染内容或交互。核心方法是利用CSS布局（如Flexbox或Grid）结合React组件化特性。

水平或垂直分屏布局

使用CSS Flexbox可以快速创建分屏布局。以下示例展示水平分屏：

// 分屏容器组件
const SplitScreen = ({ left: Left, right: Right }) => {
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ flex: 1 }}><Left /></div>
      <div style={{ flex: 1 }}><Right /></div>
    </div>
  );
};

// 使用示例
const LeftPanel = () => <div>左侧内容</div>;
const RightPanel = () => <div>右侧内容</div>;

function App() {
  return <SplitScreen left={LeftPanel} right={RightPanel} />;
}

可调整分屏比例

通过状态管理实现动态调整分屏比例：

react实现分屏

import { useState } from 'react';

const ResizableSplitScreen = () => {
  const [splitRatio, setSplitRatio] = useState(50); // 初始比例50:50

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ flex: splitRatio }}>左侧内容</div>
      <div 
        style={{ 
          width: '8px', 
          background: '#ccc', 
          cursor: 'col-resize' 
        }}
        onMouseDown={(e) => {
          const startX = e.clientX;
          const startRatio = splitRatio;

          const onMouseMove = (e) => {
            const newRatio = startRatio + (e.clientX - startX) / window.innerWidth * 100;
            setSplitRatio(Math.max(20, Math.min(80, newRatio)));
          };

          const onMouseUp = () => {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
          };

          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        }}
      />
      <div style={{ flex: 100 - splitRatio }}>右侧内容</div>
    </div>
  );
};

使用第三方库

对于更复杂的分屏需求，推荐使用专门的分屏库：

react-split：轻量级可拖拽分屏组件

npm install react-split


import Split from 'react-split';

function App() { return ( <Split sizes={[50, 50]} minSize={100} expandToMin={true}>

react实现分屏

面板1

面板2

); } ```

react-resizable-panels：支持嵌套和多种方向的分屏

npm install react-resizable-panels


import { PanelGroup, Panel, ResizeHandle } from "react-resizable-panels";

function App() { return (

左侧面板右侧面板 ); } ```

分屏状态管理

当分屏内容需要共享状态时，可使用Context或状态提升：

const SplitContext = createContext();

const SplitScreenWithContext = ({ children }) => {
  const [sharedState, setSharedState] = useState(null);

  return (
    <SplitContext.Provider value={{ sharedState, setSharedState }}>
      <div style={{ display: 'flex' }}>
        {children}
      </div>
    </SplitContext.Provider>
  );
};

// 子组件可通过useContext(SplitContext)访问共享状态

响应式分屏处理

通过媒体查询实现移动端自动切换为垂直布局：

const ResponsiveSplit = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: window.innerWidth < 768 ? 'column' : 'row'
    }}>
      <div style={{ flex: 1 }}>面板1</div>
      <div style={{ flex: 1 }}>面板2</div>
    </div>
  );
};

标签: react