React中使用data.map生成高尔夫计分卡Div时格式错乱问题

手动生成griditem组件行时布局显示正常，但使用data.map循环生成后，布局完全错乱、格式丢失。

预期与实际效果 #

• 预期：规整的网格布局，每个griditem按行列对齐
• 实际：布局错乱，元素排列不符合网格结构

手动实现代码 #

<div className="griditem"></div>
<div className="griditem">Total</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem yellow">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem">
  <input type="text" className="input" />
</div>
<div className="griditem red">
  <input type="text" className="input" />
</div>
<div className="griditem red">
  <input type="text" className="input" />
</div>
<div className="griditem fred">
  <input type="text" className="input fred" />
</div>

循环实现代码（问题版本） #

{data.map((item, index) => (
  <div key={index}>
    <div className="griditem"></div>
    <div className="griditem">Total</div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem yellow">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    <div className="griditem red">
      <input type="text" className="input" />
    </div>
    <div className="griditem red">
      <input type="text" className="input" />
    </div>
    <div className="griditem fred">
      <input type="text" className="input fred" />
    </div>
  </div>
))}

问题原因 #

循环代码给每一组griditem额外包裹了一层<div>，破坏了原本的网格布局结构。手动模式下所有griditem是网格容器的直接子元素，网格布局能正确识别并排列；循环模式下，网格容器的直接子元素变成了外层包裹的<div>，内部griditem不再是网格容器的直接子节点，导致布局规则失效。

解决方案 #

方案1：移除外层包裹div #

用React片段（<>或<React.Fragment>）替代外层<div>，不额外添加DOM节点，保留griditem作为网格容器直接子元素的结构：

{data.map((item, index) => (
  <>
    <div className="griditem"></div>
    <div className="griditem">Total</div>
    <div className="griditem">
      <input type="text" className="input" />
    </div>
    {/* 其余griditem代码保持不变 */}
    <div className="griditem fred">
      <input type="text" className="input fred" />
    </div>
  </>
))}

方案2：调整CSS适配外层容器 #

如果必须保留外层<div>，给外层div添加类名并修改CSS，让外层容器不干扰网格布局：

/* 假设原网格容器类名为grid-container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(13, 1fr); /* 根据实际列数调整 */
}
.grid-row {
  display: contents; /* 让外层div不参与布局，内部元素直接作为网格容器的子元素 */
}

修改循环代码：

{data.map((item, index) => (
  <div key={index} className="grid-row">
    {/* 内部griditem代码保持不变 */}
  </div>
))}

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