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

Posted 2023-02-21

【中文标题】在 ReactJs 中单击按钮时加载新组件？

【英文标题】：load a new component on button click in ReactJs?

【发布时间】：2020-08-21 18:17:09

【问题描述】：

【问题讨论】：

嗨，你能更深入地描述你的问题吗？也许你可以给出一些你目前的状态和你想要达到的目标

请给我一个解决方案，深度添加问题@WesleyLoh

【参考方案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;

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;

【讨论】：

我试过这段代码，但我遇到了同样的错误 TypeError: Class constructor MasterIncident cannot be invoked without 'new'

@ssaran，我已经成功地从我的机器上运行了这段代码。请创建一个简单的组件来显示“hello world”并检查它是否在您的机器上运行。

另一个帮助大师添加页面如果点击进入大师事件页面，我有一个关闭按钮

@ssaran，这意味着您想在单击关闭按钮时返回。回去，你需要使用历史，你可以检查这个例子并可以实现它。 ***.com/questions/61643881/…

【参考方案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 />
    )