[英]How to display data from 2 separate arrays in one table in React Js?
在我的项目中,我需要在一个表中显示来自 2 个单独的 arrays 的数据,并且我需要使我的代码具有响应性,我的代码:
import "./styles.css";
export default function App() {
const data = [
{
v: "car"
},
{
v: "model"
},
{
v: "accident"
},
{
v: "owner"
}
];
const info = [
{
year: "2010",
model: "bmv",
accident: "2019",
owner: "J.S"
},
{
year: "2012",
model: "bmv",
accident: "n/a",
owner: "D.W" },
{
year: "2014",
model: "bmv",
accident: "2016",
owner: "J.B"
}
];
return (
<div className="App">
<table>
<tr>
{data?.map((d, i) => (
<td>{d.v}</td>
))}
{info.map((d) => (
<>
<td>{d.year}</td>
<td>{d.model}</td>
<td>{d.accident}</td>
<td>{d.owner}</td>
</>
))}
</tr>
</table>
</div>
);
}
我正在通过 arrays 进行映射,结果显示如下:
car model accident owner 2010 bmv 2019 J.S 2012 bmv n/a D.W 2014 bmv 2016 J.B
但我需要的结果是:
car 2010 2012 2014
model bmv bmv bmv
accident 2019 n/a 2016
owner J.S D.W J.B
另一个问题是我不想指定{d.year} 或 {d.model
{info.map((d) => (
<td>{d.year}</td>
<td>{d.model}</td>
<td>{d.accident}</td>
<td>{d.owner}</td>
))}
因为当/如果添加新值(如 lastOwner)它不会显示,除非我指定 {d.lastOwner}
有没有办法通过所有值实际组合来自 2 arrays 和 map 的数据而不指定它们? 非常感谢任何建议和帮助。
您可以使用数据数组来遍历每个信息条目的属性。
https://codesandbox.io/s/zealous-thunder-zoeqp?file=/src/App.js
<table>
{/* <tr>
{data.map((d, i) => (
<th>{d.v}</th>
))}
</tr> */}
{info.map((entry, i) => (
<tr>
{data.map((d, i) => (
<>
{entry[d.v] && (
<td>
<strong>{d.v} :</strong>
{entry[d.v]}
</td>
)}
</>
))}
</tr>
))}
</table>
这只是 html 表中的一个问题,我放置了内联样式以适合您的 ui 规范,但您可以在 css 样式表中添加此样式:
import "./styles.css";
export default function App() {
const data = [
{
v: "car"
},
{
v: "model"
},
{
v: "accident"
},
{
v: "owner"
}
];
const info = [
{
year: "2010",
model: "bmv",
accident: "2019",
owner: "J.S"
},
{
year: "2012",
model: "bmv",
accident: "n/a",
owner: "D.W"
},
{
year: "2014",
model: "bmv",
accident: "2016",
owner: "J.B"
}
];
return (
<div className="App">
<table style={{ display: "flex" }}>
<thead style={{ display: "flex", flexDirection: "column" }}>
<tr style={{display:"flex", flexDirection:"column", margin:"5px"}}>
{data?.map((d, i) => (
<th key={i}>{d.v}</th>
))}
</tr>
</thead>
<tbody style={{ display:"flex"}}>
{info.map((d, i) => (
<tr key={i} style={{display:"flex", flexDirection:"column", margin:"5px"}}>
<td>{d.year}</td>
<td>{d.model}</td>
<td>{d.accident}</td>
<td>{d.owner}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
我不确定你不想显示 d.year 和 d.model 是什么意思。 但是要回答关于如何基本上转置表格的问题,您可以使用以下内容:
您基本上使用数据表中的值来打印属于它的信息表中的值。 因此,如果您向其中添加更多数据,它仍应打印此内容。
我使用条件语句,因为汽车和年份不同(这可能与我不理解的您的信息有关)。 所以如果是汽车,那么它应该打印出年份。
return (
<div className="App">
<table>
{data?.map((value) => (
<tr>
<th>{value.v}</th>
{info.map((info_value) => (
<>
<td>
{value.v === "car" ? info_value.year : info_value[value.v]}
</td>
</>
))}
</tr>
))}
<tr></tr>
</table>
</div>
);
由于我不确定您如何将数据添加到表格中,或者除了您在问题中显示的内容之外,您究竟想要打印什么,我不确定这是否正是您正在寻找的。 但它应该打印出以下内容:
car 2010 2012 2014
model bmv bmv bmv
accident 2019 n/a 2016
owner J.S D.W J.B
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.