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>