2016-06-14 4 views
0

나는 달력 구성 요소를 만들고 있는데, 반응이 DOM에 렌더링되지 않는 이유는 무엇입니까? renderWeekDays 메서드의 반환 된 요소는 무엇입니까?ES6 React JS methods 일정 구성 요소

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>에로드 할 수 없습니다 :

현재 나는 다음 있습니다. 나는 두 번 모두 바인드를 확인 것처럼

어떤 도움이 많이() 등의 방법 당신은 실제로 jsx에서 함수를 호출 할 필요가

답변

1

감상 할 수있다.

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

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

할 필요가 봐라, 그것을 작동합니다!

+0

모범생 오류! 이것을 알아 줘서 고마워. 실제로 나는 (이것) 중 하나를 바인딩 할 필요가 없다는 사실이 밝혀졌습니다. –

관련 문제