中文简洁网站设计图,做网站个人备案,仓库管理软件,徐汇区网站建设什么是动态组件#xff1f;
在页面的一小块区域切换显示不同的组件
实现方法
1.声明示例组件
//写在component1.tsx中
const Component1(){return (div组件1/div)
}
//写在component2.tsx中
const Component2(){return (div组件2/div…什么是动态组件
在页面的一小块区域切换显示不同的组件
实现方法
1.声明示例组件
//写在component1.tsx中
const Component1(){return (div组件1/div)
}
//写在component2.tsx中
const Component2(){return (div组件2/div)
}2.准备好动态组件
import { lazy } from react
const Component1lazy(()import(./component1.tsx))
const Component2lazy(()import(./component2.tsx))3.应用动态组件
import { useState,Suspense } from reactconst [viewMode,setViewMode]useState(1)
function switchView(mode:number){setViewMode(mode)
}div动态组件示范button onClick{()switchView(1)}切换1号组件/buttonbutton onClick{()switchView(2)}切换2号组件/buttonSuspense fallback{div组件加载中请稍等/div}{viewMode1Component1/}{viewMode2Component2/}/Suspense
/div
