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,
}
如果把每一个模块都写成单独的组件,直接用一个状态就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Serverless Devs 插件快速部署前端应用

简介&#xff1a; 近期函数计算和 serverless-devs/s 都更新了一系列的功能, 目前部署静态网站的步骤可以更为简洁了! 作者&#xff1a;邓超 Serverless Devs 开源贡献者 背景 我们在上文 [Aliyun] [FC] 如何使用 serverless-devs/s 部署静态网站到函数计算 中&#xff0c;…

基于 EventBridge 构建数据库应用集成

简介&#xff1a;本文重点介绍 EventBridge 的新特性&#xff1a;数据库 Sink 事件目标。 作者&#xff1a;赵海 引言 事件总线 EventBridge 是阿里云提供的一款无服务器事件总线服务&#xff0c;支持将阿里云服务、自定义应用、SaaS 应用以标准化、中心化的方式接入&#x…

如何合理使用 CPU 管理策略,提升容器性能?

简介&#xff1a;CPU Burst、拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器&#xff0c;它们解决了不同场景下的 CPU 资源管理&#xff0c;可以共同使用。点击下文&#xff0c;查看详情&#xff01; 作者&#xff1a;张佐玮&#xff08;佑祎&#xff09; 前言 在…

自己会用的一些网址

npm网址git网址谷歌插件查兼容的git教程廖雪峰vant官网vue3官网webpack官网iocnfont图标库猫云&#xff08;免费的前端开源项目&#xff09;javascript教程lodashreact官网智能PNG和JPEG压缩antd Ui插件chart 官网图标库css三角形产生器网易云Apinvm的安装教程

技术盘点:容器技术的演进路线是什么?未来有哪些想象空间?

简介&#xff1a;回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 1. 基于容器的分布式云管理加速落地&#xff1a; 2021年5月阿里云峰会上&#xff0c;阿里云发布了一云多形态的部署…

技术盘点:2022年云原生架构趋势解读

简介&#xff1a;在云原生等技术的加持下&#xff0c;2022 年的架构领域有哪些值得关注的趋势&#xff1f;云原生如何撑起架构的未来&#xff1f; 作者&#xff1a;辛晓亮 采访嘉宾&#xff1a;至简、彦林 软件架构发展至今&#xff0c;经历了从单体架构、垂直架构、SOA 架构…

js组装知识(待续……)

object.assign() 这个方法回使源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值 实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个赋值的值 let obj1 {get a() {return aaa} } let obj2 {set a(val) {console.log(val)…

如何快速构建服务发现的高可用能力

简介&#xff1a;保障云上业务的永远在线&#xff0c;是 MSE 一直在追求的目标&#xff0c;本文通过面向失败设计的服务发现高可用能力的分享&#xff0c;以及 MSE 的服务治理能力快速构建起服务发现高可用能力的演示&#xff0c;模拟了线上不可预期的服务发现相关异常发生时的…

火山引擎发布新一代数智平台VeDI,以数据驱动企业数字化增长

数据是“新石油”&#xff0c;经过提炼加工才能创造价值。 9月2日&#xff0c;火山引擎数据智能科技峰会在杭州举办。会上&#xff0c;火山引擎发布新一代企业级数据产品——数智平台VeDI&#xff08;Volcengine Data Intelligence&#xff09;&#xff0c;包括数据引擎、数据…

阿里云服务网格 ASM 正式发布商业化版本

简介&#xff1a;为了更好地满足企业日益加深的大规模使用服务网格产品、服务多语言互通、服务精细治理等需求&#xff0c;2022 年 4 月 1 日起&#xff0c;阿里云服务网格产品 ASM 正式发布商业化版本&#xff0c;为企业在生产环境下大规模落地服务网格能力提供性能、安全、高…

组件通信之pubsub

pubsub 释&#xff1a;消息订阅与发布 点击进入gitee 消息订阅与发布机制 1,先订阅,在发布 2,使用于任意组件间通信 3,要在组件的componentWillUnmount中取消订阅 作用 使用于任意组件间通信 安装 yarn add pubsub-js 引入(每个组件使用时都需要) 使用es6引入&#xff1a…

Redis消息队列发展历程

简介&#xff1a;Redis是目前最受欢迎的kv类数据库&#xff0c;当然它的功能越来越多&#xff0c;早已不限定在kv场景&#xff0c;消息队列就是Redis中一个重要的功能。Redis从2010年发布1.0版本就具备一个消息队列的雏形&#xff0c;随着10多年的迭代&#xff0c;其消息队列的…

手机+卫星,到底有多难?

作者 | 小枣君来源 | 鲜枣课堂这几天&#xff0c;关于卫星手机的新闻又火了。根据媒体报道&#xff0c;9月6日即将发布的华为Mate 50系列手机&#xff0c;将具备“卫星通信能力”&#xff0c;在没有网络的地方&#xff0c;可通过卫星系统发送紧急短信。无独有偶&#xff0c;另有…

一线技术人的成长思考总结

简介&#xff1a; 作为长期奋战在一线的技术人&#xff0c;我深刻体会到几个思维能力对技术人成长的重要性&#xff0c;熟练运用这几种思维可以帮助我们快速的进入到新的领域&#xff0c;在分析、定位和解决问题上有很大帮助。作为长期奋战在一线的技术人&#xff0c;我深刻体会…

算法篇(暂时就接触一个)

diff算法 逐层对比&#xff0c;最小的力度是标签 1、虚拟DOM中key的作用&#xff1a; 1-1、简单的说&#xff1a;key是虚拟DOM对象的标识&#xff0c;在更新显示时key起着极其重要的作用。2-2、详细的说&#xff1a;当状态的数据发生变化时&#xff0c;react会根据【新数据】…

sealer背后实现整个集群一键交付的奥秘 | 龙蜥技术

简介&#xff1a;解读集群镜像“开箱即用”神器——sealer&#xff01; 编者按&#xff1a;集群镜像把整个集群看成一台服务器&#xff0c;把 k8s 看成云操作系统&#xff0c;实现整个集群的镜像化打包和交付&#xff0c;为企业级软件提供一种“开箱即用”的应用封装技术。本文…

突发!GitHub 将关闭 Trending 热榜,开发者不答应

作者 | 苏宓出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;今天&#xff0c;当登录到 GitHub 上时&#xff0c;GitHub Trending 页面突然显示了这样一则通知&#xff1a;Heads up! This Trending tab is being deprecated. Due to low usage of Trending Reposito…

如何设计一条稳定的应用交付流程?|云效工程师指北

简介&#xff1a;如何设计一条稳定的应用交付流程&#xff1f;为持续交付的过程提供了规范化的可能&#xff0c;也引入了让人不时埋首于配置文件的小山里的麻烦。我们不妨从一次略有波折、稍显隐患的集成部署案例开始&#xff0c;看看如何着手设计一条更为稳定的应用交付流程。…

阿里云混合云开放网络生态的探索与实践

简介&#xff1a;2022年F5多云应用服务科技峰会于4月正式召开。阿里云智能混合云平台高级网络架构师张然&#xff08;然犀&#xff09;应邀于合作伙伴生态专场分享了阿里云混合云在开放网络生态领域的探索与实践。 2022年F5多云应用服务科技峰会于4月正式召开。阿里云智能混合…

阿里云启动超级智算中心,总算力达12 EFLOPS

8月30日&#xff0c;阿里云宣布正式启动张北超级智算中心&#xff0c;总建设规模为12 EFLOPS&#xff08;每秒1200亿亿次浮点运算&#xff09;AI算力&#xff0c;将超过谷歌的9 EFLOPS和特斯拉的1.8 EFLOPS&#xff0c;成为全球最大的智算中心&#xff0c;可为AI大模型训练、自…