在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。

从'.MasterAddPage'导入MasterAddPage。

class MasterCreate extends Component {

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'的情况下被调用。类构造函数MasterIncident不能在没有'new'的情况下被调用。

Answer 1

我已经修正了你的代码。请检查下面这个例子。

MasterCreate组件

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;

主事件组件

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;

Answer 2

而不是这样做？

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