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>
分析动态数据有多少组件使用，应写在父组件中，同一个数据有多个地方改变要写成对象
子组件接收数据之前声明接收数据的属性
npm intstall --save prop-types//下载包
import PropTypes from "prop-types"//导包
   //在CommentList子组件中接收数组类型数据comments
    CommentList.propT
      var HelloMessage = React.createClass({
        render: function() {
          return Hello {this.props.name};
(1)、props
props就是组件的属性，由外部通过JSX属性传入设置，一旦初始设置完成，就可以认为this.props是不可更改的，所以不要轻易更改设置this.props里面的值（虽然对于一个JS对象你可以做任何事）
				
在进行react项目，特别是后台管理的项目开发中，表单、提示框等弹出组件的应用是相当广泛的。
而这些弹框组件的状态比如开启、关闭以及内部显示的内容通常都要依靠父级组件的state进行管理。
但是当在一个页面组件中大量的使用到这些弹框的时候，对他们的状态管理会有非常严重的问题，每一个弹框组件都需要相应的state状态控制，这些状态信息一个一个的积累下来会造成state对象的异常臃肿，对代码的维护...
 npm install react-dynamic-fields 
加载组件：
 var DynamicFields = require("react-dynamic-fields"); 
 在浏览器中打开“sample”文件夹中的“index.html”文件以查看使用示例。