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> 

，瞧，它应该工作！