구성 요소 인스턴스화하기

Question

마법사 폼을 만들고 있는데 tableResults라는 첫 번째 구성 요소를로드 할 수 없습니다. 구성 요소에 따라 단계가 변경되는 상태가 있습니다. 현재 단계의 초기 상태는 1로 설정되어 있습니다. 상태가 1 일 때 tableResults가 표시되게하려면 어떻게해야합니까?

Step1.js는

import tableResults from './tableResults'; 

class Step1 extends Component { 
    constructor(props) { 
     super(props); 
    this.state = { 
     step: 1 
    } 
    } 


render() { 
    const { 
    handleSubmit, 
    previousPage, 
    step 
    } = this.props; 


    return ( 
     <form onSubmit={handleSubmit}> 

     <div className="step-container"> 

      {step === 1 && <tableResults/>} 
      </div> 
     </form> 
    ); 
    } 
} 

표 발췌문 니펫을 :

import React, { Component, PropTypes } from 'react' 

class tableResults extends Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    return ( 
     <div> 
     This is the table 
     </div> 
    ); 
    } 
} 

Answer 1

당신은 소품의 상태를 받고 있지만, 다음과 같이 대신 상태에서 그것을 얻을해야합니다

import tableResults from './tableResults'; 
 

 
class Step1 extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
    this.state = { 
 
     step: 1 
 
    } 
 
    } 
 

 

 
render() { 
 
    const { 
 
    handleSubmit, 
 
    previousPage, 
 
    step 
 
    } = this.props; 
 

 

 
    return ( 
 
     <form onSubmit={handleSubmit}> 
 

 
     <div className="step-container"> 
 

 
      {this.state.step === 1 && <tableResults/>} 
 
      </div> 
 
     </form> 
 
    ); 
 
    } 
 
}