在 Reactjs 中遍历数组

Question

const cal_days =['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const cal_months =['Jan', 'Feb', 'March', 'April',
 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'];
const daysinmonth =[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const curr =new Date();
var d = new Date();
var n = d.getMonth();
var yearName=d.getFullYear();
var monName= cal_months[n];
var firstDay = new Date(yearName,n, 1);
var startD = firstDay.getDay();
var num= daysinmonth[n];
var day=1;

class Show extends Component{
 numrow(){ 
  var array=[];
  for (var i = 1; i <=num; i++) {
  for (var j = 0; j <= 6; j++) { 
    if (day <= num && (i > 0 || j >= startD)) {
      array.push(i);
      day++;
      }
      if (day > n)
        break;
       }
      }
 array.map(function(){
 for (var i = 1; i <=6; i++) { 
  // console.log(<td>{array[i]}</td>);
  return <td>{array[i]}</td>;
 }
 })
 }
 render(){
 var daysname= cal_days.map(function(day){
 for(var i = 0; i <= 6; i++ ){
  return <td>{day}</td>;}
 })
 return (
 <div>
 <table>
 <tbody>
 <tr>
 {daysname}
 </tr>
 <tr>
 {this.numrow()}
 </tr>
 </tbody>
 </table>
 </div>
 ) 
  }
  };

我开始学习Reactjs了。我正在用 Reactjs 制作这个日历。我想显示第 1、2、3 天……等等。为什么函数 numrow 不显示任何内容？我没有在这里发布整个代码，只是其中的一部分。我是否正确使用了 array.map() 函数？

Answer 1

请阅读map api以及如何使用此功能。
你的 array.map 应该是这样的：

array.map(function(val){
  return <td>{val}</td>;
})
cal_days.map(function(day){
  return <td>{day}</td>;
})

不需要for loop

Answer 2

没有打印任何内容，因为您没有return函数 numrow 中的任何内容。我对您的逻辑做了一些修改以打印您想要的内容。

class Show extends Component {
numrow() {
    var array = [];
    do{
        var arrayRow = [];
        for (var j = 0; j <= 6; j++) {
            if (day <= num && (j >= startD || day >= startD)) {
                arrayRow.push(day);
                day++;
            } else {
                arrayRow.push("");
            }
        }
        array.push(arrayRow);
    }while(day < num)

    return array.map(function (arrayRow) {
        return (
            <tr>
                {arrayRow.map(function(item){
                    return <td> {item} < /td>        
                })}
            </tr>
        )

    })
}
render() {
    var daysname = cal_days.map(function (day) {
           return <td > {day} < /td>;
    })
    return ( 
        < div >
            < table >
                < tbody >
                    < tr > {daysname} < /tr> 
                    {this.numrow()} 
                < /tbody>
            < /table>
        </div>
    )
}
};

在 Reactjs 中遍历数组

Iterate through array in Reactjs

jsx

reactjs