ES6 React JS方法日歷組件

Question

我正在創建一個日歷組件，目前無法弄清楚為什么react無法將我的renderWeekDays方法的返回元素呈現給DOM？

目前，我有以下內容：

export default class CalendarApp extends React.Component {

constructor() {
    super();

    // Bind Methods
    this.renderWeekDays = this.renderWeekDays.bind(this);
}

renderWeekDays() {
    return (
        <tr><td>Render Week days Please</td></tr>
    )
}

render() {
    let overviewContent,
        checkRates

    // Add Check rates and availability section if Rooms page
    if (this.props.roomPage) {
        checkRates = (
            <div>
                <h2>Check rates and availability</h2>
                <small>or call us on <a href="tel:03301003180">0330 100 3180</a></small>
            </div>
        )
    }

    // Determine whether to show placeholder or actual dates
    if (this.props.dateSelected) {
        overviewContent = (
            <div>
                <span className="icon">Icon</span>
                <span className="date-from">21 Jun</span>
                <span className="seperate">-></span>
                <span className="date-to">25 Jun</span>
                <span className="clear">X</span>
            </div>
        )
    } else {
        overviewContent = ( 
            <div>
                <span className="icon">Icon</span>
                <span className="check-in">Check-in</span>
                <span className="seperate">-></span>
                <span className="check-out">Check-out</span>
            </div>
        )
    }

    return (
        <div className="calendar hotelroom-follow-calendar">
            { checkRates }
            <div className="calendar-overview">
                <button>
                    { overviewContent }
                </button>
            </div>
            <div className="calendar-container">
                <div className="calendar-month">
                    <span className="previous">Prev</span>
                    June
                    <span className="next">Next</span> 
                </div>
                <table className="calendar-table">
                    <thead>
                        <tr>
                            <td>M</td>
                            <td>T</td>
                            <td>W</td>
                            <td>T</td>
                            <td>F</td>
                            <td>S</td>
                            <td>S</td>
                        </tr> 
                    </thead> 
                    <tbody>
                        { this.renderWeekDays }
                    </tbody>
                </table>
            </div>
            { Moment().format() }
        </div>
    )
}

我沒有出現任何錯誤，它不會在<tr><td>Render Week days Please</td></tr>加載。

任何幫助將不勝感激，因為我已經仔細檢查了所有bind（）方法等。

Answer 1

您實際上需要在jsx中調用該函數。

<tbody>
    { this.renderWeekDays }
</tbody>

需要是

<tbody>
    { this.renderWeekDays() }
</tbody>

瞧，它應該可以工作！