react实现页面多个模块的切换

前言

这是做的一个多模块切换的一个案例，也是第一会这样大量的使用表单，大概有7，8个模块，这里用其中的一个模块来做展示

以下三张图片对应的就是三个模块了

这是第一个展示面
这是第二个编辑页
这是呈现数据的页面

实现过程

1、每一个模块就是一个组件

<script>// 这里定义一个默认值，作为第一个显示的模块state={cls='tj'}
</script>
<div className="module1"><div className=`module1_1  ${cls}`>第一个添加模块（当calss名为tj的时候显示）</div><div className=`module1_2  ${cls}`>第一个编辑模块（当calss名为bj的时候显示）</div><div className=`module1_3  ${cls}`>第一个展示模块（当calss名为zs的时候显示）</div>
</div>

2、先把所有3个模块全部隐藏，再利用一个动态class名实现模块的切换

/*
样式文件
需要用另一个class名限制一下，不然3个组件的切换就会失效*/
.module1{div {display: none;}.module1_1 {&.tj{display: block;}}.module1_2 {&.bj{display: block;}}.module1_3 {&.zs{display: block;}}
}

总结

1、大量的数据提交，修改，重置，数据的深拷贝和数据还原是关键，可以提炼
2、一个功能就是一个事件，复用起来很方便，不要为一次的省事而作叠加。
3、input 框 value和defaultValue 属性不可以一起使用，会发生冲突
4、获取值一般都是value ，多选框需要通过checked
5、多个模块的状态控制（互不关联）,一般情况下是这么设置的
{
module1:false,
module2:false,
module3:false,
}
如果把每一个模块都写成单独的组件，直接用一个状态就可以了

react实现页面多个模块的切换相关推荐

webpack+react多页面开发架构
项目已经升级为最新版本参考react-multi-page-app webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包 ...
app.vue 跳转页面_【在线教学】第8章网站页面布局和模块设计
第8章网站页面布局和模块设计 8.1 网站页面布局在设计网站界面时,将页面中的模块进行规范化的设计和合理的布局,能够实现网页内容的结构化,使访问者直观.迅速的找到需要的信息. 1.网站UI视觉规 ...
[转]SupSite页面文件与模块关系说明
随着版本的更新,模板文件可能有所增减,不过基本方法不变.大家举一反三吧. 适用SS/XS全部版本 1, SupeSite的模板文件和页面的关联 SupeSite的模板文件和页面url链接地址是有关联 ...
关于MFC共享DLL的模块状态切换 .
什么是模块状态? 在每个模块(EXE或DLL)中,都存在一种全局的状态数据,MFC依靠这种全局的状态数据来区分不同的模块,以执行正确的操作.这种数据包括:Windows实例句柄(用于加载资源),指向应 ...
Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果
1 需求实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xm ...
[react] 在react中页面重新加载时怎样保留数据？
[react] 在react中页面重新加载时怎样保留数据? 使用浏览器localstorage来保存应用程序的状态个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
页面平滑过渡全屏切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: 代码: <!DOCTYPE html> <html> <head lang="en&q ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
页面中查询模块的设计与实现思路
页面中查询模块的设计与实现思路一智能查询 1.1 界面设计 1.2 技术实现二万能查询 2.1 界面设计 2.2 技术实现三便捷查询 3.1 界面设计 3.2 技术实现总结在做一个 ...

react实现页面多个模块的切换

前言

以下三张图片对应的就是三个模块了

实现过程

总结

react实现页面多个模块的切换相关推荐

最新文章

热门文章