Question

我有一个我无法解决的奇怪问题。我必须使用react渲染表 - 但是我的数据结构是这样的，我需要从第一级的名称作为表标题 - 然后我需要将与该标题相关联的数据映射到表中的正确单元格。 / p>

这是我的数据

[{
    "cell_id": 1,
    "step_data": [{
      "width": 1920,
      "name": "bruce",
    }, {
      "width": 2236,
      "name": "ben",

      }],
        "cell_name": " boys names"
      },
{
        "cell_id": 2,
        "step_data": [{
          "width": 1920,
          "name": "grace",
        }, {
          "width": 2236,
          "name": "megan",

        }],
        "cell_name": "girls names"
      }

为了映射表格标题，我这样做会动态呈现标题但是我似乎无法将数据放在正确的标题下，因为它们都在同一行上。

我是怎么做到的？

我希望的任务是有一个带有两个标题男孩名字和女孩名字的表格 - 我需要男孩名字的step_data是男孩名字标题下的行，女孩名字的步骤数据是女孩名字标题< / p>

<table className="table">
    <tbody>
      <tr>
        {this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
        )}

      </tr>
      {this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}

      <tr>

      </tr>

    </tbody>
  </table>

Answer 1

{[
  ...Array( // get the number of rows you need to create
    Math.max(...this.props.data.map(({ step_data }) => step_data.length))
  ).keys()
].map(i => (
  <tr key={i}>
    {this.props.data.map(({ step_data, cell_name }) => (
      <td key={cell_name}>{(step_data[i] || {}).name}</td>
    ))}
  </tr>
))}

映射表数据2D数组

1 个答案: