什么是动态组件？
在页面的一小块区域切换显示不同的组件
实现方法
1.声明示例组件
//写在component1.tsx中
const Component1=()=>{
return (
<div>组件1</div>
)
}
//写在component2.tsx中
const Component2=()=>{
return (
<div>组件2</div>
)
}
2.准备好动态组件文章来源：https://www.toymoban.com/news/detail-609976.html
import { lazy } from "react"
const Component1=lazy(()=>import('./component1.tsx'))
const Component2=lazy(()=>import('./component2.tsx'))
3.应用动态组件文章来源地址https://www.toymoban.com/news/detail-609976.html
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>
到了这里，关于react经验4:动态组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
