React - 返回几行表和 REACTDOM 错误答案

【问题标题】：React - return few rows of table and REACTDOM errorReact - 返回几行表和 REACTDOM 错误
【发布时间】：2017-03-19 01:11:24
【问题描述】：

我在 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);

【问题讨论】：

你能指出确切的错误吗？
警告：validateDOMNesting(...)：不能作为的子项出现。请参阅日历列表 > tr > tr。然后我添加另一个来创建新 ROW 的错误。
看起来您正试图将一个表格行嵌套为另一个表格行的子行，这是无效的 HTML。查看我的答案以获取正确呈现表格的示例，看看它是否可以帮助您获得正确的结果。
我知道当你说不同的语言时很难沟通。我试着清理了一些英语，但我仍然对你所说的一些内容感到困惑；特别是关于数字和星期——第二个要点。
抱歉有错误。我将来会尽量提供最好的问题。第二个要点是尝试从 API 返回一些数据。现在我手动返回数据（1,2,3,4,5,6,7），但我想要来自 API 响应的数据。我正在尝试以提供 Boris Ablamunits 的方式解决它。

【解决方案1】：

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

您想要做的是将每个月的每个星期都映射到自己的行，每行显示自己的数据。然后，在表格中正确呈现这组行。像这样的：

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

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

【讨论】：

谢谢你的线索。现在，我还用这种代码气味重构了我的代码。这是因为我不确定我是否可以在 map 函数中与和混合使用，现在它可以正常工作并查看错误在哪里。以后我会记得在 JS 中生成行。