React函数式组件实现分屏页面及项目文件组织咨询

核心页面实现 #

直接用Flex布局做左右分栏，所有交互逻辑按模块拆分到独立组件里，代码如下：
首先是页面父组件，负责分栏布局和跨组件状态共享：

// src/pages/MapVideoSplitPage/index.jsx
import { useState } from 'react';
import InteractiveMap from '@/components/InteractiveMap';
import VideoPlayer from '@/components/VideoPlayer';
import './index.css';

export default function MapVideoSplitPage() {
  // 存放需要在地图、视频间联动的共享状态，比如选中的监控点对应视频地址
  const [linkedData, setLinkedData] = useState(null);

  return (
    <div className="split-container">
      <div className="left-pane">
        <InteractiveMap onPointSelect={setLinkedData} />
      </div>
      <div className="right-pane">
        <VideoPlayer playConfig={linkedData} />
      </div>
    </div>
  );
}

对应的分栏样式文件，直接占满整个视口，无多余边距：

/* src/pages/MapVideoSplitPage/index.css */
html, body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.split-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.left-pane {
  flex: 1;
  height: 100%;
  border-right: 1px solid #eee;
}

.right-pane {
  flex: 1;
  height: 100%;
  background: #000;
}

两个子组件的编写注意事项：

• InteractiveMap组件：根据你用的地图服务商选对应的React封装库即可，比如用Mapbox选react-map-gl、高德地图选@uiw/react-amap、Leaflet选react-leaflet，所有地图缩放、打点、路径绘制、区域选择这类交互逻辑全部封装在组件内部，不要把地图相关逻辑堆在父页面。
• VideoPlayer组件：不管是播本地MP4文件、直播流还是接入第三方视频平台SDK，所有播放控制、进度条、清晰度切换这类逻辑都封装在组件内部，只有需要和地图联动的参数通过父组件props传入即可。

如果需要做移动端适配，只要加一段媒体查询，小屏下自动改成上下分栏，不需要改动组件逻辑：

@media (max-width: 768px) {
  .split-container {
    flex-direction: column;
  }
  .left-pane {
    border-right: none;
    border-bottom: 1px solid #eee;
  }
}

该场景推荐的项目文件组织方式 #

不要一开始就搞过度复杂的架构，按功能拆分、方便维护就行，推荐目录结构如下：

your-project/
├── public/                # 静态资源，存地图标记图标、静态视频文件这类
├── src/
│   ├── pages/             # 页面级组件
│   │   └── MapVideoSplitPage/  # 当前分栏页面的独立目录
│   │       ├── index.jsx        # 父页面分栏逻辑
│   │       └── index.css        # 分栏布局样式
│   ├── components/        # 可跨页面复用的通用组件
│   │   ├── InteractiveMap/ # 通用地图组件，其他页面需要地图直接引入
│   │   │   ├── index.jsx
│   │   │   ├── config.js  # 单独存放地图key、自定义样式配置
│   │   │   └── useMapControls.js # 自定义hook，封装打点、缩放等复用交互逻辑
│   │   └── VideoPlayer/   # 通用视频播放器组件
│   │       ├── index.jsx
│   │       └── controls/  # 播放器自定义控件，比如音量键、进度条
│   ├── hooks/             # 全局通用自定义hook，比如响应式判断、数据请求逻辑
│   ├── utils/             # 通用工具函数，比如地图坐标转换、视频地址拼接
│   ├── App.jsx
│   └── main.jsx
└── package.json

几个新手容易踩的坑：

• 不要把地图、视频的所有逻辑全堆在同一个jsx文件里，后期改交互找代码会非常麻烦，不用一开始拆的特别细，哪个部分逻辑超过200行就单独抽成文件就行。
• 地图和视频的联动状态统一放在父页面维护，遵循React单向数据流规则，不要在两个子组件里直接互相传值，排查bug会简单很多。
• 地图、视频这类SDK加载的时候注意做销毁处理，组件卸载的时候记得调用SDK的销毁方法，避免内存泄漏。

内容的提问来源于stack exchange，提问作者xclloe00