Javascript React动态表创建

我正在尝试使用React制作日历

我可以生成一个包含这个月日期的数组

但是，我不能输出它

如果我遗漏了什么，请评论

class Calendar extends Component{

  /* ... */

  render(){
    let data = ["", "", "", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ""]
    return(
      <table>
        <thead>
          <tr>
            <th>S</th>
            <th>M</th>
            <th>T</th>
            <th>W</th>
            <th>T</th>
            <th>F</th>
            <th>S</th>
          </tr>
        </thead>
        <tbody>
          /* insert here dynamic data */
          /*
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          */
        </tbody>
      </table>
    )
  }
}

类日历扩展组件{
/* ... */
render（）{
让数据=[“”，“”，“”，“”，1，2，3，4，5，6，7，8，9，10，11，12，13，14，15，16，17，18，19，20，21，22，23，24，25，26，27，28，29，30，31，“”]
返回(
s
M
T
W
T
F
s
/*在此插入动态数据*/
/*
1.
2.
3.
*/
)
}
}

使用循环显示阵列中的所有元素

<tr>
{[...data].map((x, i) => (
    <td key={i}>{x}</td>
))}
</tr>

{[…数据].map（（x，i）=>(
{x}
))}

因此，通常需要迭代一个值数组并显示它们。你应该像下面这样做，但如果你觉得逻辑不好，请道歉

class Calendar extends Component{

  /* ... */

  render(){
    let rows = [];
    let columns = [];
    let data = ["", "", "", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ""]
    for(let i=0; i < data.lenth; i++){
       columns.push(<td key={i}>data[i]</td>);
       if(i == 6){
          rows.push(<tr>{columns}</tr>);
          columns = [];
       }
       if(i == 13){
          rows.push(<tr>{columns}</tr>);
          columns = [];
       }
       if(i == 20){
          rows.push(<tr>{columns}</tr>);
          columns = [];
       }
       if(i == 27){
          rows.push(<tr>{columns}</tr>);
          columns = [];
       }
       if(i == 34){
          rows.push(<tr>{columns}</tr>);
          columns = [];
       }
    }

    return(
      <table>
        <thead>
          <tr>
            <th>S</th>
            <th>M</th>
            <th>T</th>
            <th>W</th>
            <th>T</th>
            <th>F</th>
            <th>S</th>
          </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    )
  }
}

类日历扩展组件{
/* ... */
render（）{
让行=[]；
让列=[]；
让数据=[“”，“”，“”，“”，1，2，3，4，5，6，7，8，9，10，11，12，13，14，15，16，17，18，19，20，21，22，23，24，25，26，27，28，29，30，31，“”]
for（设i=0；i

我更新了我的代码。你能试着让我知道吗。你的实际期望是什么？