Javascript 在同一页面上加载ReactJS组件，覆盖其他组件

我有一个包含其他组件的主组件。其中一个组件是多步骤注册表单，它有三个步骤-1。选择计划，2。帐户详细信息和3。谢谢你，佩奇。“主页”组件显示多步骤注册表单的第一步，即“选择计划”组件

class MyComponent extends React.Component {

  \\all your logic and inside the render function:
  switch (step) {
      case 1:
        return (
          <Home {...props}/>
        );
      case 2:
        return (
          <Account
            {...props}
          />
        );
      case 3:
       return (
         <Home {...props}/>
       );

    }
  }

单击计划后，我希望Account组件在同一页面上打开，覆盖Home组件，而不是替换当前组件。同时，我希望道具能够传递给子组件

包含注册表单的主组件

class Home extends Component {
  render() {
    return (
      <div>
        <Video/>
        <Featured/>
        <SignUpForm />
      </div>
    );
  }
}

class Home扩展组件{
render（）{
返回(
);
}
}

多步骤报名表-

import React, { Component } from "react";
import Plan from "./Plan";
import Account from "./Account";
import ThankYou from "./ThankYou";

export default class SignUpForm extends Component {
  state = {
    step: 1,
    account_type: "",
    first_name: "",
    last_name: "",
    email: "",
    password: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
    console.log(this.state.step);
  };

  // Go back to previous step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

  // Handle fields change
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const {
      account_type,
      price,
      first_name,
      last_name,
      email,
      password,
      token
    } = this.state;
    const values = {
      account_type,
      price,
      first_name,
      last_name,
      email,
      password,
      token
    };

    switch (step) {
      case 1:
        return (
          <Plan
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 2:
        return (
          <Account
            nextStep={this.nextStep}
            prevStep={this.prevStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 3:
       return <ThankYou />;

    }
  }
}

import React，{Component}来自“React”；
从“/Plan”导入计划；
从“/Account”导入帐户；
从“/Thankyu”导入Thankyu；
导出默认类SignUpForm扩展组件{
状态={
步骤：1，
帐户类型：“”，
名字：“，
姓氏：“，
电邮：“，
密码：“”，
};
//继续下一步
下一步=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤+1
});
console.log（this.state.step）；
};
//返回上一步
prevStep=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤-1
});
};
//处理字段更改
handleChange=input=>e=>{
this.setState（{[input]：e.target.value}）；
};
render（）{
const{step}=this.state；
常数{
账户类型，
价格，
名字，
姓，
电子邮件，
密码，
代币
}=本州；
常量值={
账户类型，
价格，
名字，
姓，
电子邮件，
密码，
代币
};
开关（步骤）{
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回；
}
}
}

我不太清楚您是否想让它保持在屏幕顶部

<Video/>
<Featured/>

如果您正在为应用程序使用类似React Navigation的内容，您可以通过这种方式传递参数，而不是使用switch语句，请使用Navigation.navigate进入您选择的特定屏幕

---

那么您想要

主组件的孙子来覆盖主组件？你不能这样做

如果您想要覆盖的原因是您不想显示
视频
和
特色
组件，只需将“步骤”逻辑上移到
主
组件即可。然后您可以像这样返回：

switch (step) {
      case 1:
        return (
          <Video />
          <Featured />
          <Plan
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 2:
        return (
          <Account
            nextStep={this.nextStep}
            prevStep={this.prevStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 3:
       return (
        <Video>
        <Featured />
        <ThankYou />
       );

    }

开关（步骤）{
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回(
);
}

如果您真的想替换主组件，请将所有逻辑向上移动一个或多个组件，即高阶组件

class MyComponent extends React.Component {

  \\all your logic and inside the render function:
  switch (step) {
      case 1:
        return (
          <Home {...props}/>
        );
      case 2:
        return (
          <Account
            {...props}
          />
        );
      case 3:
       return (
         <Home {...props}/>
       );

    }
  }


类MyComponent扩展了React.Component{
\\渲染函数中的所有逻辑和参数：
开关（步骤）{
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回(
);
}
}

---

请记住，当向上移动逻辑时，状态在较低的组件中成为道具，您需要将状态从较高组件中的逻辑向下传递为道具。

谢谢！这有帮助。我会用这个逻辑来工作