Question

我正在尝试使用反应制作日历。

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

但是，我无法输出。

如果我错过了任何事情，请评论。

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>
    )
  }
}

Answer 1

使用循环显示数组中的所有元素。

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

Answer 2

因此通常迭代一个值数组并显示它们。您应该执行以下操作，但是如果您觉得这是错误的逻辑，请对不起。

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>
    )
  }
}

反应动态表创建

2 个答案: