我正在嘗試在 reactJS 中進行“每周計劃”，我是初學者，如果您看到任何錯誤，請見諒。
我有一系列事件，如下所示：
var events = [
{
date : moment("14-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"),
name : "EVENT MONDAY 13 2022"
},
{
date : moment("16-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"),
name : "EVENT WEDNESDAY 2022"
}];
我創建了一個條件來查看事件日期是否與周日期相同，并將其放在這樣的表中：
<table className="table table-bordered text-center">
<thead>
<tr className="bg-light-gray">
{week.map((wk) => (<th class="text-uppercase">{wk}</th>))}
</tr>
</thead>
<tbody>
<tr>
{week.map((wk) => (
events.map((ev) =>(
wk === ev.date ?
<td>{ev.name}</td>
:
<td></td>
))
))}
</tr>
</tbody>
</table>
但它不起作用，因為它創建了太多的“td”元素，而且我不知道如何將事件名稱放在正確的日期下方......
有人可以幫我嗎？
uj5u.com熱心網友回復：
當您需要渲染它時，考慮一下表格的外觀。首先，您需要“制作行”，然后在每一行內，您需要“制作列”。由于您只做一個星期，它幾乎可以免費為您提供第一個任務，只有一行。
至于第二部分，渲染列，您需要更好地準備資料。按事件發生的日期組織事件。我會將其視為一項簡單的任務，事件僅在您發布的一個特定日期發生，如果您希望事件跨越多天，代碼顯然會有所不同。
首先，成像所需的輸出是什么：
var events = {
[date]: [eventName, eventName, eventName],
[date]: [eventName],
[date]: [],
}
這表明一個結構是一天可以英雄零，發生一個或多個事件。也可以使用undefined代替[]“零”情況。這使您可以輕松地渲染：
{week.map((wk) => (
<td key={wk}>
{events[wk] ? events[wk].join(', ') : null}
</td>
)}
現在，它的作用是在渲染一周中的某一天時，它會在該單元格中列印一個事件串列（如果有的話）。這肯定是簡化的，但它顯示了要做什么。
最后，您需要修改資料以匹配最終資料：
var events = [
{
date: moment("14-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"),
name: "EVENT MONDAY 13 2022"
},
{
date: moment("16-03-2022", "DD-MM-YYYY").format("ddd D MMM YYYY"),
name: "EVENT WEDNESDAY 2022"
}
];
var eventsMapped = {}
var event
for (event of events) {
if (!eventsMapped[event.date]) {
eventsMapped[event.date] = []
}
eventsMapped[event.date].push(event.name)
}
您可以簡單地在渲染函式中執行此操作。對于小型陣列，應該沒問題。如果你得到很多事件，你可以考慮稍后優化它。
然后你可以用eventsMapped它來渲染它events上面的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/445793.html
標籤：javascript 数组 反应 循环 html表
上一篇：塊值小于上一次迭代
下一篇：R回圈線性回歸