gpt4 book ai didi

javascript - React - 返回几行表和 REACTDOM 错误

转载 作者:行者123 更新时间:2023-11-28 04:07:54 25 4
gpt4 key购买 nike

我在 React 中创建/返回多行时遇到问题。返回两行时出错:<tr> can't be a child of <tr> .

My Current Code

我正在创建一个简单的日历,到目前为止我有一个标题,其中包括从星期一到星期日的一周中的几天。我要:

  • 正文有 4-5 行(每周一行)
  • 应用本周(而不是页面顶部的 1 2 3 4 5 6 7 等数组 - 来自 API 的映射数据 - firstWeek、secondWeek 等)

整个月的日历应该如下所示,从第一个元素到最后一个元素 (7):

firstWeek[0], firstWeek[1], firstWeek[2] etc etc
[secondWeek[0], secondWeek[1] etc etc
thirdWeek[0], secondWeek[1] etc etc

我考虑过使用循环,但不确定如何处理它——我应该使用其他方法吗?在修复我的设计模式之前,我必须在返回几行时修复那些 DOM 错误。


是的,我知道这是一个密码,但不知道如何不同地返回它:

  var firstWeek = days[0].map(day=>day.day_number);
var secondWeek = days[1].map(day=>day.day_number);
var thirdWeek = days[2].map(day=>day.day_number);
var forthWeek = days[3].map(day=>day.day_number);
var fifthWeek = days[4].map(day=>day.day_number);

最佳答案

React 警告您您正在尝试嵌套表格行 <tr>作为另一个表格行的子项,这是无效的 HTML。

您要做的是将每月的每个星期映射到它自己的行,其中每行显示自己的数据。然后,在表中正确呈现行集。像这样:

    const tableRows = weeks.map((week) => {
return (
<tr>
{ week.map(dayOfWeek => <td>{ dayOfWeek.someData }</td>) }
</tr>
);
});

return <table><tbody>{ tableRows }</tbody></table>

关于javascript - React - 返回几行表和 REACTDOM 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42875403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com