ES6 React JS 方法日历组件答案

【问题标题】：ES6 React JS methods Calendar ComponentES6 React JS 方法日历组件
【发布时间】：2016-10-15 08:01:25
【问题描述】：

我正在创建一个日历组件，但目前无法弄清楚为什么 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() 方法等。

【问题讨论】：

标签： javascript methods reactjs ecmascript-6 rendering

【解决方案1】：

您需要在 jsx.xml 中实际调用该函数。

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

需要

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

瞧，它应该可以工作了！

【讨论】：

小学生错误！感谢您注意到这一点。事实证明我也不需要 .bind(this)。