初学者：在 table reactJS 中使用条件循环

Question

我正在尝试在 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 中，如下所示：

        <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”元素，而且我不知道如何将事件名称放在正确的日期下方...

有人可以帮我吗？

Answer 1

考虑 table 需要渲染时的样子。首先，您需要“制作行”，然后在每一行内，您需要“制作列”。因为你只做一个星期，所以它几乎免费给你第一个任务，只有一行。

关于第二部分，渲染列，你需要更好地准备你的数据。在事件发生的那一天组织事件。我会将此视为一项简单的任务，事件仅在您发布的一个特定日期发生，如果您希望事件跨越多天，代码显然会有所不同。

首先，成像想要的输出是什么：

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 的位置。

初学者：在 table reactJS 中使用条件循环

Beginner : Loop with condition in table reactJS

javascript

arrays

loops

html-table

reactjs