Reactjs 基于按钮单击的react js render differnet组件

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

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;

功能测试（道具）{
const[component，setComponent]=useState（“createPatient”）
const[rendered，setRendered]=useState（）
函数clickHandler（组件）{
开关（组件）{
案例“createPatient”：
setRendered（）
打破
案例“findPatient”：
setRendered（）
打破
案例“患者名单”：
setRendered（）
}
}
返回(
单击处理程序（“创建患者”）}>创建患者
单击处理程序（“findPatient”）}>查找患者
单击处理程序（“患者列表”）}>患者列表
{rendered}
);
}
导出默认测试；

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

目前，当加载

测试
组件时，您正在同时加载所需的所有组件。如果将来导入的组件变大或复杂，则初始渲染可能会减慢

代码拆分允许您将代码拆分为小块，然后根据需要加载

这是一张工作票

import React，{useState}来自“React”；
功能测试（）{
const[component，setComponent]=useState（null）；
const LoadComponent=异步位置=>{
const{default:component}=wait import（`./components/${location}`）；
组件（组件）；
};
返回(
单击按钮继续
LoadComponent（“PatientForm”）}>
创造病人
LoadComponent（“FindPatient”）}>
找病人
LoadComponent（“PatientListTable”）}>
病人名单
{component}
);
}
导出默认测试；

如果您使用的是最新版本的
React
，则可以使用
React.lazy
。您还需要用
悬念
包装这个惰性组件。您可以这样修改上述代码，以加载带有
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>


import React，{useState，suspent}来自“React”；
const LoadComponent=位置=>{
const Component=React.lazy（（）=>import（`./components/${location}`）；
setComponent（）；
};
返回{component}

始终考虑如何将最少的JavaScript发送给用户。
其他可用逻辑大致相似，最终结果没有多大不同，主要是风格和可读性不同；这里有两种替代方法

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

功能测试（道具）{
const[index，setIndex]=useState（0）；
常量分量=[，]；
返回(
setIndex（0）}>患者表单
setIndex（1）}>查找患者
setIndex（2）}>患者列表
{组件[索引]}
)

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

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

功能测试（道具）{
const[step，setStep]=useState（0）；
返回(
设置步骤（0）}>患者表单
设置步骤（1）}>查找患者
设置步骤（2）}>患者列表
{step==0&&}
{step==1&&}
{step==2&&}
)

您得到了这样的想法
无需将组件保持在状态，而是可以使用条件直接渲染它们


功能测试（道具）{
const[component，setComponent]=useState（“createPatient”）
函数clickHandler（组件）{
开关（组件）{
案例“createPatient”：
setComponent（'createPatient）
打破
案例“findPatient”：
setComponent（'findPatient'）
打破
案例“患者名单”：
setComponent（'patientsList'）
}
}
返回(
单击处理程序（“创建患者”）}>创建患者
单击处理程序（“findPatient”）}>查找患者
单击处理程序（“患者列表”）}>患者列表
{component==='CreatePatient'&&}
{component==='findPatient'&&}
{component==='patientsLis'&&}
);
}
导出默认测试