在 React 中组合数组和嵌套数组

Question

我想将父数组及其子数组合并为一个 table。子数组的背景色应为绿色。

我做起来有困难吗？

请检查我的codesandbox CLICK HERE

<TableBody>
      {[rows, rows?.personnels]
        .filter(Array.isArray)
        .flat()
        .map((row) => (
          <TableRow
            key={row.name}
            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
          >
            <TableCell>{row.fname}</TableCell>
            <StyledTableCell align="right">{row.mname}</StyledTableCell>
          </TableRow>
        ))}
    </TableBody>

预期输出

Answer 1

制作一个数组，将您的行及其子行也压扁为单个数组。并为 TableRow 中的两种情况处理添加条件 fname 和 mname 渲染。

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { styled } from "@mui/material/styles";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: "lightgreen"
  },
  [`&.${tableCellClasses.body}`]: {
    backgroundColor: "lightgreen"
  }
}));

const rows = [
  {
    id: "111",
    fname: "Thomas",
    mname: "James",
    personnels: [
      {
        id: 1234,
        person_id: "233",
        parent_id: "111",
        person: {
          id: "233",
          fname: "Robert",
          mname: "Williams"
        }
      }
    ]
  },
  {
    id: "222",
    fname: "Jane",
    mname: "Doe",
    personnels: [
      {
        id: 4567,
        person_id: "333",
        parent_id: "222",
        person: {
          id: "333",
          fname: "James",
          mname: "Quincy"
        }
      }
    ]
  }
];

export default function BasicTable() {
  const arr=[...rows,...rows.map((e)=>e.personnels).flat()];
  console.log(arr)
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Fname</TableCell>
            <TableCell>Mname</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {arr.map((row) => (
              <TableRow
                key={row?.fname || row?.person?.fname}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
              {row?.fname ? (
            <TableCell>{row?.fname}</TableCell>
          ) : (
            <StyledTableCell>{row?.person?.fname}</StyledTableCell>
          )}
                {row?.mname ? (
            <TableCell align="right">{row?.mname}</TableCell>
          ) : (
            <StyledTableCell align="right">
              {row?.person?.mname}
            </StyledTableCell>
          )}
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

代码沙箱link：https://codesandbox.io/s/combine-array-and-string-in-mapping-in-react-forked-dnq0zc?file=/demo.js:36-2278

在 React 中组合数组和嵌套数组

Combine Array and a Nested Array in React

arrays

ecmascript-6

reactjs

material-ui