React初学者求助：如何动态嵌套生成内容行与盒子？

嘿，我来帮你搞定这个嵌套的问题！你已经搞定了动态生成行的逻辑，那嵌套盒子其实就是把盒子的生成逻辑放到每行的渲染里面就行，我给你改个示例代码，一看就懂：

完整示例代码 #

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// 假设你的内容数组是这样的，每个元素对应一行，包含该行要展示的盒子内容
const yAxis = [
  { id: 1, boxes: ['盒子1-1', '盒子1-2'] },
  { id: 2, boxes: ['盒子2-1'] },
  { id: 3, boxes: ['盒子3-1', '盒子3-2', '盒子3-3'] }
];

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">动态生成行和盒子</h1>
        </header>
        <div className="content-container">
          {/* 遍历生成每一行 */}
          {yAxis.map((rowItem) => (
            <div key={rowItem.id} className="content-row">
              <p>第 {rowItem.id} 行</p>
              {/* 在当前行内部，遍历生成对应的盒子 */}
              {rowItem.boxes.map((boxText, boxIndex) => (
                <div key={`${rowItem.id}-${boxIndex}`} className="content-box">
                  {boxText}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

关键要点说明 #

• 嵌套逻辑要对应：别把行和盒子分开渲染，一定要把盒子的map循环放到行的map循环内部，这样每一行才能准确包含自己对应的盒子，不会出现结构混乱。
• 必须加唯一key：React要求所有动态生成的元素都要有唯一的key属性，这里行用rowItem.id（如果你的数据里有唯一标识最好），盒子用行id+盒子索引来保证全局唯一，避免渲染警告。
• 简化场景处理：如果你的yAxis是简单的字符串数组（比如['内容1', '内容2', '内容3']），那每行只需要一个盒子的话，代码可以更简单：

{yAxis.map((item, index) => (
  <div key={index} className="content-row">
    <div className="content-box">{item}</div>
  </div>
))}

你之前的问题大概率是把行和盒子的生成逻辑分开了，导致没法嵌套到对应的行里，按照上面的方式调整结构就没问题啦！

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