需要帮助构建反应表的逻辑

Question

我有一个很小的问题，但我是新开发人员，第一次学习反应，发现很难解决。

问题：

我有一个名为 Table 的组件，我通过迭代其他项目来呈现另一个名为 TableRow 的组件。在表格行组件中，我正在渲染行。我有这样的数据行：

1: [a]
2: [a,b]
3: [a]

我想输出这样的东西

1  a
2  a
   b
3  a

我能够实现这样的输出

1  a
2  a
2  b
3  a

但很难获得准确的输出。在表格行组件中，我只是迭代项目并显示它，我必须包含一个登录名，我可以在其中检查 2 的标题是否已经可用，不要放它，只插入数据部分。如何实现。任何帮助将不胜感激。 谢谢。

data: [
{
  header: header
  items: [1]
},
{
   header: header2,
   items: [1,2]
 },
{
   header: header3,
    items: [1,2]
 }
 ]

示例代码：

<Table>
    this.props.data.map(obj => {
        return <NewComponent header = {obj.header} items = {obj.items} />
    })
</Table>

<NewComponent> 
    this.props.items.map(item=> {
        <TableRow> 
                <th> {this.props.header} </th>
                <tb> {item} </tb>
        </TableRow>
    })
</NewComponent>

电流输出：

1 1
2 1
2 2 
3 1

我想要

1  1
2  1
   2
3  1

任何帮助将不胜感激。

Answer 1

如果是第一次传递，则有条件地呈现标题值

<Table>
    this.props.items.map( (item, idx), => 
        <TableRow> 
            <TableHeader>{idx === 0 ? this.props.header : ''}<TableHeader>
            <TableBody>body>item<TableBody>
        </TableRow>
    )
</Table>

编辑

这是您更新后的示例。

const Table = (props) => {
    const { data } = props;
    return (
      <table>
        <tbody>
          {data.map((row, idx) => (
            <TableRow header={row.header} items={row.items} />
          ))}
        </tbody>
      </table>
    );
  }
}

const TableRow = ({ header, items }) => {
  return items.map((item, idx) => (
    <tr>
      <td>{idx === 0 ? header : " "}</td>
      <td>{item}</td>
    </tr>
  ));
};

Heres a simple example to play with