在 React 中实例化组件

Question

我正在制作一个向导表单，但我无法加载第一个名为 tableResults 的组件。我有一个称为 step 的状态，它根据组件而变化。当前步骤的初始状态设置为 1。当状态为 1 时，如何让 tableResults 显示？

Step1.js sn-p

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

您从 props 中获取状态，但您应该从状态中获取它，如下所示：

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