javascript - React JSX 中的函数不返回值

Question

所以我有一个模块可以呈现当月的日历。看起来像这样。

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 函数没有返回任何内容，即使它应该返回带有日期的标签。当我在没有函数的情况下执行此操作(通过为每个标签编写映射语句)时，它工作正常。请指出我哪里搞砸了。

Answer 1

您的calRender方法不会返回任何内容。您在 map 函数的回调中确实有一个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>};
    );
}