React如何根据div id/key匹配航班数据，在对应容器内动态渲染组件

第一步：预处理航班数据，统一格式并构建时间映射 #

首先把原始数据里的时间格式统一（把冒号替换成点，避免0:00和0.00格式不匹配的问题），同时按「时间-起降类型-对应机场列表」的结构构建索引，方便后续快速查找对应时间的航班：

// 原始数据
const rawData = {
    "AirplaneData": {
      "Arrivals":[
        {"BIO": "0:00"}, 
        {"VGU": "2.00"}, 
        {"MEX": "4.00"}],
      "Departures": [
        {"BIO": "3:00"}, 
        {"VGU": "4.00"}, 
        {"MEX": "6.00"}]
      
    }
  }

// 构建时间-航班映射表
const timeFlightMap = {}
// 处理到达航班
rawData.AirplaneData.Arrivals.forEach(flight => {
  const airport = Object.keys(flight)[0]
  // 统一时间格式，把冒号替换为点
  const time = flight[airport].replace(':', '.')
  if(!timeFlightMap[time]) timeFlightMap[time] = {Arrivals: [], Departures: []}
  timeFlightMap[time].Arrivals.push(airport)
})
// 处理出发航班，逻辑同上
rawData.AirplaneData.Departures.forEach(flight => {
  const airport = Object.keys(flight)[0]
  const time = flight[airport].replace(':', '.')
  if(!timeFlightMap[time]) timeFlightMap[time] = {Arrivals: [], Departures: []}
  timeFlightMap[time].Departures.push(airport)
})

第二步：循环生成全天小时级DOM，绑定时间作为key #

不需要手动编写每小时的重复DOM，直接循环生成0-23小时对应的容器，直接把规范化后的时间作为div的key，同时和前面的映射表匹配渲染对应内容：

<div className={classes.bars}>
  {/* 循环生成全天24小时对应的模块 */}
  {Array.from({length:24}, (_,i)=>{
    // 生成和标签格式一致的时间字符串，比如0.00、1.00
    const timeStr = `${i}.00`
    // 读取当前时间对应的航班数据，无数据则默认为空
    const currentFlights = timeFlightMap[timeStr] || {Arrivals: [], Departures: []}
    return (
      <div className={classes.graph} key={timeStr}>
        {/* 上方柱状块渲染到达航班 */}
        <div className={classes.bar}>
          {currentFlights.Arrivals.map(airport => <span key={airport}>{airport} 到达</span>)}
        </div>
        {/* 时间标签 */}
        <div className={classes[`label${i}`]}><span style={{marginLeft: "10px"}}>{timeStr}</span></div>
        {/* 下方柱状块渲染出发航班 */}
        <div className={classes.bar}>
          {currentFlights.Departures.map(airport => <span key={airport}>{airport} 出发</span>)}
        </div>
      </div>
    )
  })}
</div>

核心逻辑说明 #

• 提前把航班数据按时间做索引，避免每次渲染都遍历全量航班数据，查找效率更高
• 所有时间统一格式后作为key，既保证key唯一，又能直接和航班数据的时间做精准匹配
• 循环生成24小时的容器，不用手动重复写DOM代码，后续维护也更方便

内容的提问来源于stack exchange，提问作者Ap-Mich