所以,我有呈现当月日历模块。它看起来像这样。
let days = {0: 'Sun', 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat'};
let today = new Date();
today.setDate(1);
let dayOfWeek = today.getDay();
let count = 0;
class Calender extends Component {
constructor(props) {
super(props);
this.calRender = this.calRender.bind(this);
}
calRender(x) {Object.keys(days).map(index => {count++;
return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>})}
render() {
return(
<table>
<tr>
{Object.keys(days).map((index) => <th key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#232'}}>{days[index]}</th>)}
</tr>
<tr>
{Object.keys(days).map(index => {
if(index < dayOfWeek) {
return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#bbb'}}></td>}
else {count++;
return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>}
})}
</tr>
<tr>
{this.calRender(7)}
</tr>
<tr>
{this.calRender(14)}
</tr>
<tr>
{this.calRender(21)}
</tr>
<tr>
{this.calRender(21)}
</tr>
</table>
)
}
}
问题是,calRender功能不返回任何东西,即使它应该与日期返回标签。当我这样做没有功能(写为每个标签映射语句),它工作正常。请建议,我搞砸这件事。
您calRender方法不返回任何东西。你有在地图功能的回调return语句,但是这还不够。
通过增加一个return语句解决这个问题:
calRender(x) {
return Object.keys(days).map(index => {
count++;
return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>};
);
}
您calRender方法不返回任何东西。
编辑calRender方法是这样的:
calRender(x) {
return Object.keys(days).map(index => {
count++;
return (
<td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>
{count}
</td>
)
})
}