在反應中實例化組件

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