Question

我要在单击按钮时加载新组件。一个新组件应该完全替换当前组件-我的意思是应该将其加载到整个屏幕上（而不是按钮旁边的任何位置）。

从“反应”导入React；

MasterIncident类扩展了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：如果没有'new'，则不能调用类构造函数MasterIncident

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组件

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组件

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;

在按钮上加载新组件单击ReactJs？

2 个答案: