Instanziieren einer Komponente in React

Question

Ich mache einen Assistenten, aber ich kann nicht die erste Komponente namens tableResults laden. Ich habe einen Zustand namens step, der sich abhängig von der Komponente ändert. Derzeit ist der Anfangszustand des Schritts auf 1 gesetzt. Wie würde ich tableResults anzeigen lassen, wenn der Status 1 ist?

Step1.js Snippet

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

Tabelle Snippet:

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

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

    render() { 

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

Answer 1

Sie den Zustand von Requisiten bekommen, sondern sollten Sie es von dem Zustand erhalten, wie folgt:

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