网格布局映射的数组-react

Question

Im映射一个数组，并希望在其列类别下显示映射项的每个道具-Item Name下面的name，QTY.下面的quantity，等等。现在我将每个项目显示在以下列下面——首先是Item Name下面的整个item，等等。这显然是预期的行为，但如何在其列类别下正确显示每个道具？

import { ReactElement } from "react";
import styled from "styled-components";
import { Invoice } from "../../../Root/Root.utils";
type Props = {
invoice?: Invoice;
};
export const SummaryPart = ({ invoice }: Props): ReactElement => {
return (
<Summary>
<Items>
<p>Item Name</p>
<p>QTY.</p>
<p>Price</p>
<p>Total</p>
{invoice?.items.map((item) => (
<Item>
<h3>{item.name}</h3>
<span>{item.quantity}</span>
<span>{item.price}</span>
<span>{item.total}</span>
</Item>
))}
</Items>
</Summary>
);
};
const Summary = styled.div`
width: 100%;
border-radius: 8px;
background-color: rgba(249, 250, 254, 1);
padding: 2rem;
`;
const Items = styled.div`
display: grid;
grid-template-columns: repeat(4, 1fr);
`;
const Item = styled.div``;

Answer 1

我建议使用表格

<table>
<thead>
<tr>
<th>Item Name</th>
<th>QTY.</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{invoice?.items.map((item) => (
<tr>
<td>{item.name}</td>
<td>{item.quantity}</td>
<td>{item.price}</td>
<td>{item.total}</td>
</tr>
))}
</tbody>
</table>

如果你真的想使用网格布局，你可以在项目中添加以下内容：

grid-template-rows: repeat(${invoice.length}, 1fr);