ES6 Reagieren JS Methoden Kalender Komponente

Question

Ich erstelle eine Kalenderkomponente und kann im Moment nicht herausfinden, warum reagieren wird nicht auf das DOM die zurückgegebenen Elemente meiner renderWeekDays Methode rendern?

Zur Zeit habe ich folgende:

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> 
    ) 
} 

Ich bin nicht mit Fehlern präsentiert, es wird einfach nicht in <tr><td>Render Week days Please</td></tr> laden.

Jede Hilfe wäre sehr geschätzt, wie ich doppelt binden alle überprüft haben() Methoden usw.

Answer 1

Sie tatsächlich benötigen, um die Funktion in Ihrem jsx aufrufen.

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

benötigt

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

und voila zu sein, sollte es funktionieren!