在反应中实例化组件

Question

我正在制作向导窗体，但无法加载名为tableResults的第一个组件。我有一个叫做step的状态，根据组件的不同而不同。目前该步骤的初始状态设置为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> 
 
    ); 
 
    } 
 
}