実際にコンポーネントをインスタンス化する

Question

私はウィザードフォームを作成していますが、ロードするtableResultsという最初のコンポーネントを取得できません。コンポーネントに応じてステップが変わるステートがあります。現在、ステップの初期状態は1に設定されています。状態が1のときにtableResultsをどのように表示させるのですか？

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

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

表スニペットをスニペット