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

Question

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

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

包含SignUpForm的Home组件

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

多步骤注册表格-

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 />;

    }
  }
}

Answer 1

因此，您想让Home组件的孙子覆盖Home组件吗？ 您根本无法通过这种方式做到这一点。

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

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

    }

如果您确实要替换Home组件，则将所有逻辑再上移一个组件，即High Order组件。

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

    }
  }

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

Answer 2

我不清楚是否要让它停留在屏幕顶部？

<Video/>
<Featured/>

如果您在应用程序中使用类似React-Navigation的方法，则可以通过这种方式传递参数，而不是使用switch语句，请使用Navigation.navigate转到您选择的特定屏幕。

https://reactnavigation.org/docs/en/params.html