загрузить новый компонент при нажатии кнопки в ReactJs?

Question

Я хочу загрузить новый компонент при нажатии кнопки. Новый компонент должен полностью заменить текущий компонент - я имею в виду, что он должен быть загружен на весь экран (а не где-нибудь рядом с кнопками).

импортировать React из "react";

class MasterIncident extends React.Component {

render () {

return (
  <React.Fragment>
    <button
      variant="contained"
      size="medium"
      color="primary"
      value="single"
      name="1"
      onClick={this.props.clickBtn}
    >
      Add
    </button>
    <button
      variant="contained"
      size="medium"
      color="primary"
      value="batch"
      name="2"
      onClick={this.props.clickBtn}
    >
      Export
    </button>
    <h3>Master Incident Inventory</h3>
  </React.Fragment>
);

}}

экспорт MasterIncident по умолчанию;

импорт MasterIncident из './MasterIncident' ;

импортировать MasterAddPage из './MasterAddPage';

класс MasterCreate расширяет компонент {

state = {
    renderView: 0
  };

  clickBtn = e => {
    this.setState({
      renderView: +e.target.parentNode.name
    });
  };

  render() {
    switch (this.state.renderView) {
      case 1:
        return <MasterAddPage />;
      default:
        return <MasterIncident clickBtn={this.clickBtn} />;
    }
  }

}

экспортировать MasterCreate по умолчанию

const MasterAddPage = (props) => {

     console.log(props)
        return (
          <div >Content</div>
        )
    }

экспорт по умолчанию MasterAddPage

Выдает ошибку TypeError: конструктор класса MasterIncident не может быть вызван без 'new'

Answer 1

вместо этого?

  render() {
    switch (this.state.renderView) {
      case 1:
        return <MasterAddPage />;
      default:
        return <MasterIncident clickBtn={this.clickBtn} />;
    }
  }

вы можете сделать это:

  render() {
    return (
      this.state.renderView === 0 ? <MasterAddPage /> : <MasterIncident clickBtn={this.clickBtn} />
    )
  }

Answer 2

Я исправил ваш код. Пожалуйста, проверьте этот пример ниже:

MasterCreate Component

import MasterIncident from './MasterIncident';
import MasterAddPage from './MasterAddPage';
import React from "react";

class MasterCreate extends React.Component {
    state = {
        renderView: 0
    };

    clickBtn = (value) => {
        this.setState({
            renderView: value
        });
    };

    render() {
        switch (this.state.renderView) {
            case 1:
                return <MasterAddPage value={"Master Add Page is added"}/>;
            default:
                return <MasterIncident clickBtn={this.clickBtn}/>;
        }
    }
}
export default MasterCreate;

MasterIncident Component

import React from "react";

class MasterIncident extends React.Component {
    render() {
        console.log('master incident');
        return (
            <React.Fragment>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="single"
                    name="1"
                    onClick={() => {this.props.clickBtn(0)}}
                >
                    Add
                </button>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="batch"
                    name="2"
                    onClick={() => {this.props.clickBtn(1)}}
                >
                    Export
                </button>
                <h3>Master Incident Inventory</h3>
            </React.Fragment>
        );
    }
}
export default MasterIncident;

MasterAddPage Компонент

import React from "react";

const MasterAddPage = (props) => {
    console.log(props);
    return (
        <div>Content</div>
    )
};
export default MasterAddPage;