在 React 中实例化一个组件

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

Table 片段：

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 获取状态，但您应该从 state 获取它，如下所示：

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

在 React 中实例化一个组件

Instantiating a Component in React

components

state

reactjs