【技术实现步骤摘要】
本专利技术涉及web前端应用，特别涉及一种react组件动态切换方法及终端。
技术介绍
1、分而治之是软件工程的重要思想，是复杂系统开发和维护的基石，而前端目前的模块化和组件化都是基于分而治之的思想。组件化是react的核心思想，一个react页面通常是由各种组件拼装而成的。由于使用场景不同，一个页面经常需要根据用户的操作切换不同的组件。
2、一个常规的组件切换流程如图1所示。要实现组件切换，首先需要初始化相关的状态。比如初始化默认显示的组件，初始化传入组件中的参数等等。在一个页面中，可以通过多种操作触发切换事件。比如用户点击某个按钮来切换组件，或者是通过url地址栏的参数来切换组件等。在切换组件之前，通常需要做一些预处理操作。比如需要清理将要隐藏的组件，需要为将要显示的组件设置初始值等。在预处理操作完成后，才开始切换组件。所谓的切换组件，就是指在一批组件中，按要求显示某个组件，隐藏其他组件。最后在页面中渲染出指定的组件。
3、目前常规的做法是通过react的状态机制控制页面的渲染更新，通过react的事件机制响应用户的操作。接着在对应的事件处理方法中先进行切换预处理，再修改组件的显示状态。最后在渲染的时候，根据组件的显示状态设置对应的css属性，从而控制组件是否显示。
4、如图2所示，在图2所示代码中，第6行-第10行用于组件切换的初始化设置。其中第6行代码通过view状态变量保存当前要显示的组件id。第7行-第10行代码通过componentsdata状态变量保存组件的初始化数据。
...【技术保护点】
1.一种React组件动态切换方法，其特征在于，包括步骤：
2.根据权利要求1所述的一种React组件动态切换方法，其特征在于，所述切换组件采用React Component方式实现。
3.根据权利要求2所述的一种React组件动态切换方法，其特征在于，当前页面中通过的所有可切换组件均由所述切换组件的标签包裹具体为：预先通过所述切换组件的组件标签包裹当前页面的所有可切换组件，使程序运行时所述可切换组件作为children属性传入所述切换组件中，使所述切换组件能够基于cloneElement方法克隆所述可切换组件并注入所述状态属性。
4.根据权利要求3所述的一种React组件动态切换方法，其特征在于，所述可切换组件传入所述切换组件中时，通过排列方法将所述可切换组件形成数组。
5.根据权利要求1所述的一种React组件动态切换方法，其特征在于，步骤S3具体为：
6.一种React组件动态切换终端，包括处理器、存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤
7.根据权利要求6所述的一种React组件动态切换终端，其特征在于，所述切换组件采用React Component方式实现。
8.根据权利要求7所述的一种React组件动态切换终端，其特征在于，当前页面中通过的所有可切换组件均由所述切换组件的标签包裹具体为：预先通过所述切换组件的组件标签包裹当前页面的所有可切换组件，使程序运行时所述可切换组件作为children属性传入所述切换组件中，使所述切换组件能够基于cloneElement方法克隆所述可切换组件并注入所述状态属性。
9.根据权利要求8所述的一种React组件动态切换终端，其特征在于，所述可切换组件传入所述切换组件中时，通过排列方法将所述可切换组件形成数组。
10.根据权利要求6所述的一种React组件动态切换终端，其特征在于，步骤S3具体为：
...【技术特征摘要】
1.一种react组件动态切换方法，其特征在于，包括步骤：
2.根据权利要求1所述的一种react组件动态切换方法，其特征在于，所述切换组件采用react component方式实现。
3.根据权利要求2所述的一种react组件动态切换方法，其特征在于，当前页面中通过的所有可切换组件均由所述切换组件的标签包裹具体为：预先通过所述切换组件的组件标签包裹当前页面的所有可切换组件，使程序运行时所述可切换组件作为children属性传入所述切换组件中，使所述切换组件能够基于cloneelement方法克隆所述可切换组件并注入所述状态属性。
4.根据权利要求3所述的一种react组件动态切换方法，其特征在于，所述可切换组件传入所述切换组件中时，通过排列方法将所述可切换组件形成数组。
5.根据权利要求1所述的一种react组件动态切换方法，其特征在于，步骤s3具体为：
6.一种react组件动态切换终端，包括处理器、存...
【专利技术属性】
技术研发人员：刘德建，何春霖，陈宏，
申请(专利权)人：福建天泉教育科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。