如何通过重用有效地在 return 内的 React js 功能组件中使用 Switch case？

Question

我想在 React js 功能组件中使用 Switch case。我想要一种有效的使用方式。

我有这个代码片段：

import React, { useState } from 'react';
import FormUserDetails from './FormUserDetails';

function UserForm() {
    const [step, setStep] = useState(1);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const nextStep = () => {
        setStep(prevState => prevState + 1)
    }
    const previousStep = () => {
        setStep(prevState => prevState - 1)
    }

    switch (step) {
        case 1:
            return (
                <div>
                    <FormUserDetails
                    />
                    <button onClick={() => nextStep()}>
                        next
                    </button>
                    <button onClick={() => previousStep()}>
                        previous
                    </button>
                </div>
            )
        case 2:
            return (
                <div>
                    <h1>{step}</h1>
                    <button onClick={() => nextStep()}>
                        next
                    </button>
                    <button onClick={() => previousStep()}>
                        previous
                    </button>
                </div>
            )
        default:
            return (
                <div>
                    <h1>Final</h1>
                </div>
            )
    }
}
export default UserForm

此代码运行良好。然而，在 return

                <button onClick={() => nextStep()}>
                    next
                </button>
                <button onClick={() => previousStep()}>
                    previous
                </button>

我正在重复这段代码。我只想知道一种有效的代码结构，以便在每个 switch case 中重用这些行。

Answer 1

您可以应用更多的代码重构，将按钮分解为可重用的组件。

const StepButtons = () => (
  <Fragment>
    <button onClick={nextStep}>next</button>
    <button onClick={previousStep}>previous</button>
  </Fragment>
);

结果

import React, { Fragment, useState } from 'react';
import FormUserDetails from './FormUserDetails';

function UserForm() {
  const [step, setStep] = useState(1);
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

  const nextStep = () => {
    setStep(prevState => prevState + 1);
  };

  const previousStep = () => {
    setStep(prevState => prevState - 1);
  };

  const StepButtons = () => (
    <Fragment>
      <button onClick={nextStep}>next</button>
      <button onClick={previousStep}>previous</button>
    </Fragment>
  );

  switch (step) {
    case 1:
      return (
        <div>
          <FormUserDetails />
          <StepButtons />
        </div>
      );
    case 2:
      return (
        <div>
          <h1>{step}</h1>
          <StepButtons />
        </div>
      );
    default:
      return (
        <div>
          <h1>Final</h1>
        </div>
      );
  }
}
export default UserForm

Answer 2

你可以在不同的文件中创建一个新组件（当然如果你想区分这个组件）

import React from 'react'

export default function NavigationButtons(props) {
  return (
    <>
        <button onClick={props.nextStep}>
          next
        </button>
        <button onClick={props.previousStep}>
          previous
        </button>
     </>
)}

然后像这样使用它

<NavigationButtons nextStep={nextStep} previousStep={previousStep}/>

如何通过重用有效地在 return 内的 React js 功能组件中使用 Switch case？

How to use Switch case in React js functional component inside return efficiently by reusing?

reactjs

react-functional-component