請在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..so上。爲什麼函數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

什麼也沒有打印，因爲你沒有從功能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> 
    ) 
} 
};