React中基于ID填充静态课程表单元格的最优方案咨询

首先，为了高效匹配lesson_id和单元格ID，建议先把timetableData转换成以lesson_id为键的对象，这样能以O(1)的时间复杂度查找对应数据，比循环遍历数组效率高很多，数据量大时优势更明显。

下面分两种场景给出具体实现方式：

1. 原生JS直接操作DOM（无框架场景） #

如果是用纯JavaScript开发，可在数据加载完成后，通过映射表快速定位单元格并填充内容：

// 将数组转换为键值对映射，方便快速查找
const timetableMap = timetableData.reduce((map, item) => {
  map[item.lesson_id] = item;
  return map;
}, {});

// 遍历映射表，填充对应单元格
Object.entries(timetableMap).forEach(([id, lesson]) => {
  const cell = document.getElementById(id);
  if (cell) {
    cell.innerHTML = `
      <div>${lesson.subject}</div>
      <div>${lesson.teacher}</div>
    `;
    // 无数据的单元格可直接添加输入框
    // 例：else { cell.innerHTML = '<input type="text" placeholder="添加课程" />'; }
  }
});

2. React场景下的实现（适配你的JSX代码） #

React中不推荐直接操作DOM，建议通过条件渲染实现。先将数据转成映射表，再在渲染单元格时匹配数据：

第一步：缓存映射表 #

在组件中用useMemo缓存映射表，避免每次渲染重复生成：

const timetableMap = useMemo(() => {
  return timetableData.reduce((map, item) => {
    map[item.lesson_id] = item;
    return map;
  }, {});
}, [timetableData]);

第二步：封装单元格组件（简化代码） #

把单元格逻辑封装成独立组件，减少重复代码：

const TimetableCell = ({ cellId, timetableMap }) => {
  const lesson = timetableMap[cellId];
  return (
    <td className={styles.tg0lax} id={cellId}>
      {lesson ? (
        <>
          <div>{lesson.subject}</div>
          <div>{lesson.teacher}</div>
        </>
      ) : (
        <input type="text" placeholder="添加课程" />
      )}
    </td>
  );
};

第三步：使用组件渲染表格 #

用封装好的组件替换原有的单元格代码，让结构更简洁：

<table className={styles.tg}>
 <thead>
  <tr>
   <th className={styles.tg0lax}>x</th>
   <th className={styles.tg0lax}>Monday</th>
   <th className={styles.tg0lax}>Tuesday</th>
   <th className={styles.tg0lax}>Wednesday</th>
   <th className={styles.tg0lax}>Thursday</th>
   <th className={styles.tg0lax}>Friday</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td className={styles.tg0lax}>1</td>
   <TimetableCell cellId={101} timetableMap={timetableMap} />
   <TimetableCell cellId={201} timetableMap={timetableMap} />
   <TimetableCell cellId={301} timetableMap={timetableMap} />
   <TimetableCell cellId={401} timetableMap={timetableMap} />
   <TimetableCell cellId={501} timetableMap={timetableMap} />
  </tr>
  {/* 后续行按同样方式替换即可 */}
 </tbody>
</table>

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