Загрузите компонент ReactJS на той же странице, переписав другие компоненты

Question

У меня есть домашний компонент, который содержит другие компоненты. Одним из компонентов является многоэтапная форма регистрации, состоящая из трех этапов: 1. Выберите «План», «2. Детали учетной записи» и 3. Страница «Спасибо». Компонент Home отображает первый шаг многоэтапной формы регистрации, которая является компонентом Choose Plan.

После нажатия на план я хочу, чтобы компонент «Учетная запись» открывался на той же странице, перезаписывая компонент «Домой» вместо замены текущего компонента. В то же время я хочу, чтобы реквизиты передавались дочерним компонентам.

Домашний компонент, содержащий SignUpForm

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 переопределил домашний компонент?Вы просто не можете сделать это таким образом.

Если причина, по которой вы хотите переопределить, заключается в том, что вы не хотите показывать компоненты Video и Featured, просто переместите логику 'step' к компоненту 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, переместите всю логику вверх еще на один компонент, компонент высокого порядка.

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