react经验4:动态组件

什么是动态组件？

在页面的一小块区域切换显示不同的组件

实现方法

1.声明示例组件

//写在component1.tsx中
const Component1=()=>{return (<div>组件1</div>)
}
//写在component2.tsx中
const Component2=()=>{return (<div>组件2</div>)
}

2.准备好动态组件

import { lazy } from "react"
const Component1=lazy(()=>import('./component1.tsx'))
const Component2=lazy(()=>import('./component2.tsx'))

3.应用动态组件

import { useState,Suspense } from "react"

const [viewMode,setViewMode]=useState(1)
function switchView(mode:number){setViewMode(mode)
}

<div>动态组件示范<button onClick={()=>switchView(1)}>切换1号组件</button><button onClick={()=>switchView(2)}>切换2号组件</button><Suspense fallback={<div>组件加载中，请稍等</div>}>{viewMode===1&&<Component1/>}{viewMode===2&&<Component2/>}</Suspense>
</div>