[英]Function not returning value in react JSX
So I have a module that renders a calender for the current month. 因此,我有一个模块可以渲染当前月份的日历。 It looks like this. 看起来像这样。
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>
)
}
}
The problem is that calRender function is not returning anything, even though it is supposed to return tags with dates. 问题在于,即使应该返回带有日期的标签,calRender函数也不会返回任何内容。 When I am doing this without a function(by writing map statements for each tag), it is working fine. 当我在没有功能的情况下执行此操作(通过为每个标签编写映射语句)时,它工作正常。 Please suggest where I have messed this up. 请提出我在哪里搞砸了。
Your calRender method does not return anything. 您的calRender方法不返回任何内容。 You do have a return statement in the map function's callback, but that's not enough. 在地图函数的回调中确实有一个return语句,但这还不够。
Fix it by adding a return statement: 通过添加return语句来修复它:
calRender(x) {
return Object.keys(days).map(index => {
count++;
return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>};
);
}
Your calRender method does not return anything. 您的calRender方法不返回任何内容。
Edit calRender method like this: 像这样编辑calRender方法:
calRender(x) {
return Object.keys(days).map(index => {
count++;
return (
<td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>
{count}
</td>
)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.