Question

我正在创建一个日历组件，目前无法确定为什么反应不会向DOM呈现我renderWeekDays方法的返回元素？

目前我有以下内容：

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>

瞧，它应该有效！

ES6 React JS方法Calendar Component

1 个答案: