React动态生成Grid布局Div不显示问题求助（含gridArea内联样式实现代码）

AI 小北

2026-4-29

嘿，我一眼就发现问题所在啦！你在JSX里用了forEach来生成任务槽的div元素，但forEach本身是没有返回值的（它只会遍历数组执行回调，最终返回undefined），所以React根本没拿到要渲染的元素列表，自然看不到任何黑色背景的div~

解决步骤：

把forEach换成map
map方法会遍历数组并返回一个新的元素数组，这正是React渲染列表所需要的。
去掉多余的index++操作
map的第二个参数本身就是当前元素的索引值，而且是从0开始的，直接用它来计算gridArea就好，手动修改索引反而容易出问题。
修正gridArea的语法
JSX的style是JavaScript对象，属性值不需要加CSS里的分号，我帮你去掉了多余的分号。

修改后的业务组件代码：

export const DayColumn = ({ day }) => {
  const { timeColumn } = useTableContext();
  return (
    <Wrapper gridInterval={timeColumn.length}>
      <h2>{day}</h2>
      {/* 用map替代forEach，直接使用索引计算gridArea */}
      {timeColumn.map((_, index) => (
        <div 
          key={index} 
          className='task-slot' 
          style={{ gridArea: `${index + 1} / 1 / ${index + 2} / 2` }} 
        >
          <h1>text</h1>
          <BsPlusSquareFill />
        </div>
      ))}
    </Wrapper>
  );
};