反应js基于按钮点击渲染不同的组件

Question

所以我有这个逻辑，用户点击一个按钮，然后根据点击的按钮渲染不同的组件我想知道是否有更好的方法来实现这个逻辑

function Test(props) {

    const [component, setComponent] = useState("createPatient")
    const [rendered, setRendered] = useState()

    function clickHandler(component) {
        switch (component) {
            case "createPatient":
                setRendered(<PatientForm/>)
                break
            case "findPatient":
                setRendered(<FindPatient/>)
                break
            case "patientsList":
                setRendered(<PatientListTable/>)

        }
    }

    return (
        <div>

            <button onClick={() => clickHandler("createPatient")}>Create Patient</button>
            <button onClick={() => clickHandler("findPatient")}>Find Patient</button>
            <button onClick={() => clickHandler("patientsList")}>Patients List</button>


            { rendered  }
        </div>
    );
}

export default Test;

Answer 1

这里的所有其他答案都是正确的，并且适用于您的用例。 我想更进一步，向您介绍代码拆分。 这不是必需的，但您可以随时尝试。

目前，您正在加载Test组件时需要的所有组件。 如果您将来导入的组件变得庞大或复杂，则初始渲染可能会减慢。

代码拆分允许您将代码拆分成小块，然后您可以按需加载。

这是一个工作沙箱。

import React, { useState } from "react";

function Test() {
  const [component, setComponent] = useState(null);

  const LoadComponent = async location => {
    const { default: component } = await import(`./components/${location}`);
    setComponent(component);
  };

  return (
    <div>
      <h1>Click the button to proceed</h1>
      <button onClick={() => LoadComponent("PatientForm")}>
        Create Patient
      </button>
      <button onClick={() => LoadComponent("FindPatient")}>
        Find Patient
      </button>
      <button onClick={() => LoadComponent("PatientListTable")}>
        Patients List
      </button>
      {component}
    </div>
  );
}

export default Test;

如果你使用的是最新版本的React ，你可以使用React.lazy 。 您还需要用Suspense包装这个惰性组件。 您可以像这样修改上面的代码以使用React.lazy加载组件。

import React, { useState, Suspense } from "react";

const LoadComponent = location => {
    const Component = React.lazy(() => import(`./components/${location}`));
    setComponent(<Component />);
  };

return <Suspense fallback={<div>Loading...</div>}>{component}</Suspense>

始终考虑如何将最少量的 JavaScript 运送给用户。

Answer 2

其他可用的逻辑大致相似，最终结果并没有太大区别，主要是风格和可读性不同； 这里有两种替代方法；

function Test(props) {
const [index, setIndex] = useState(0);
const components = [<PatientForm/>, <FindPatient/>, <PatientListTable/>];

return (
  <div>
     <button onClick={() => setIndex(0)}>Patient Form</button>
     <button onClick={() => setIndex(1)}>Find Patient</button>
     <button onClick={() => setIndex(2)}>Patients List</button>
    {components[index]}
  </div>
)

或使用 boolean 方法渲染组件； 像这样的东西；

function Test(props) {
const [step, setStep] = useState(0);

return (
  <div>
     <button onClick={() => setStep(0)}>Patient Form</button>
     <button onClick={() => setStep(1)}>Find Patient</button>
     <button onClick={() => setStep(2)}>Patients List</button>
     {step == 0 && <PatientForm/>}
     {step == 1 && <FindPatient/>}
     {step == 2 && <PatientListTable/>}
  </div>
)

你明白了

Answer 3

无需将组件保留在 state 中，而是可以使用条件直接渲染它们。

 function Test(props) { const [component, setComponent] = useState("createPatient") function clickHandler(component) { switch (component) { case "createPatient": setComponent('createPatient) break case "findPatient": setComponent('findPatient') break case "patientsList": setComponent('patientsList') } } return ( <div> <button onClick={() => clickHandler("createPatient")}>Create Patient</button> <button onClick={() => clickHandler("findPatient")}>Find Patient</button> <button onClick={() => clickHandler("patientsList")}>Patients List</button> {component === 'createPateient' && <PatientForm/>} {component === 'findPatient' && <FindPatient/>} {component === 'patientsLis' && <PatientListTable/>} </div> ); } export default Test;