javascript - 使用reactjs创建表时如何删除行中的重复数据条目

Question

抱歉标题不好，但我不知道如何用谷歌搜索这个问题。出于某种原因，我无法理解如何在reactjs中创建这个表。其中第 1 列下的 XX 为空，而第 2 列中的数据将继续填充。

这几乎就是我想要的:其中 xx 为空白

   column 1    column 2

1. David       Male
   xx          30
   xx          BasketBall
2. Sam         BaseBall
3. John        Male
   xx          Football

我正在尝试使用reactjs和material-ui来做到这一点。

我的数据格式:

[
 ['David', ['Male', '30', 'BasketBall']],
 ['Sam', ['BaseBall']],
 ['John', ['Male', 'FootBall']]
]

这是我的代码片段:

    <TableBody>
//this will display 1 row for 1 item as in number 2 mentioned above.
              {data.map((prop, key) => {
                if (prop[1].length <= 1) {
                  return (
                    <TableRow key={key}>
                      {prop.map((prop, key) => {
                        return (
                          <TableCell className={classes.tableCell} key={key}>
                            {prop}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  );
                } else {

//this is where I'm stuck at
                  return (
                    <TableRow key={key}>
                      {prop.map((prop, key) => {
                        return (
                          <TableCell className={classes.tableCell} key={key}>
                            {prop}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  );
                }
              })}
            </TableBody>

Answer 1

一种解决方案是检查该值是否是数组。如果是这样，请将每个数组值映射到 div (以逐行显示它们)。否则，只需输出 prop。

我已经为 vertical-align: top 添加了内联样式，但您可能希望将其移至 CSS 文件中。

//this is where I'm stuck at
return (
    <tr key={key}>
        {prop.map((prop, key) => (
            <td
                key={key}
                style={{verticalAlign: 'top'}}
            >
                {Array.isArray(prop) && prop.map((prop, key) => (
                    <div key={key}>{prop}</div>
                ))
                || prop}
            </td>
        ))}
    </tr>
);