在 React 的逻辑构建方面需要帮助 table

Question

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

问题：

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

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

我想要这样的输出

1  a
2  a
   b
3  a

我可以实现这样的输出

1  a
2  a
2  b
3  a

但发现很难获得准确的输出。在 table 行组件中，我只是遍历项目并显示它，我必须包含一个登录名，我可以在其中检查 header for 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>

当前输出：

我要

如有任何帮助，我们将不胜感激。

Answer 1

有条件地渲染 header 值（如果它是第一遍）

<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

在 React 的逻辑构建方面需要帮助 table

Need help in logic building for react table

logic

reactjs

react-component

编辑