react中控制元素的显示与隐藏
1.通过 state
变量来控制是否渲染元素
类似于 vue
的 v-if
方法是通过变量来控制是否加载元素的,如果变量为false
,内容就直接不会渲染的。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
<div>
{
this.state.isShow?(
<div>显示的元素</div>
):null
}
</div>
)
}
}
2.通过 style
控制 display
属性
类似于 vue
中的 v-show
通过 display
属性来控制元素显示与隐藏
constructor(props){
super(props);
this.state = {
isShow:'none'
}
}
render(){
return (
<div style={{display:this.state.isShow}}>显示的元素</div>
)
}
}
3.通过动态切换className
通过className
切换类名来实现元素的显示和隐藏。
//.css文件
.is-show{
display:none
}
//.js文件
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
<div>
// 写法一
<div className={this.state.isShow?'old':'old is-show'}>显示的元素</div>
// 写法二
<div className={`${this.state.isShow?'':'is-show'} old`}>显示的元素</div>
</div>
)
}
}
第一种方法不适合频繁控制显示隐藏的情况,因为它会重新渲染元素,比较耗费性能。
react中控制元素的显示与隐藏的更多相关文章
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端
legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- jquery控制元素的显示与隐藏
比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
- JS控制元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
- jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
- js控制元素的显示与隐藏
<body class="easyui-layout"> <div id = "centerId" data-options="re ...
- 仅使用css实现点击 控制元素的显示与隐藏!
视频教程:https://www.bilibili.com/video/BV1uE411Q7tx?p=15&spm_id_from=pageDriver 大致方法:在被点击的元素后面 放一个c ...
随机推荐
- Selenium常见报错问题(3)- 解决和分析NoSuchElementException
如果你在跑selenium脚本时,需要某些异常不知道怎么解决时,可以看看这一系列的文章,看看有没有你需要的答案 https://www.cnblogs.com/poloyy/category/1749 ...
- Docker help详细帮助
常用的 docker 命令 docker # docker 命令帮助 Commands: attach Attach to a running container # 当前 shell 下 attac ...
- MySql id 设定为主键不自增后,再给 sort 字段增加自增属性
需求 id 已经被设置为主键,但是没有给它设置 自增 属性.sort 起到一个排序的作用,需要给它设置一个 自增 属性 加自增属性的前提 表中的属性没有增加自增 赋予自增属性的字段,必须带有 索引 S ...
- 13个Python图形库
By Django中国社区 at 2013-04-27 07:49 Python的13大图形库,matplotlib功能最强大,Cairoplot最漂亮,django-chartit与Django集成 ...
- HDU 5725 Game
1. 笔记 题意是求距离的期望(距离仍指连接两点且有效的路径长度的最小值).直观想象可以发现,该距离与曼哈顿距离相比最多多2(可以构造这样的路径). 答案=(任意两点曼哈顿距离的总和 - 至少有一点是 ...
- HTML模版组件
1.介绍 BootStrap (最好看的) css js [x] 学习 BootStrap 规则 jQueryUI (美观一般,偏后台.*) css js [x] 学习 jQueryUI 规则 Eas ...
- Modbus TCP协议说明
协议帧 事物处理标识| 协议标识| 长度| 从机地址| 功能码| 数据 0x00 00| 0x00 00| 0x00 08| 0x01| 0x0F| 0x00 14 0x00 01 0x01 0x01 ...
- centos6更换yum源和epel源
epel是yum的一个软件用源,包含了很多基本源中没有的软件,cobbler就属于基本源中没有的软件,所以需要安装epel源. yum源: wget -O /etc/yum.repos.d/CentO ...
- FileZilla更新服务器文件后浏览器没有刷新的一种常见情况
一.问题描述 在使用FileZilla更新服务器文件时,常出现的一种情况是: 刷新浏览器,发现该网页并未更新.但是检查网页源代码可以发现文件已经更新了,这就奇怪了,是服务器出了问题吗?还是FileZi ...
- Clickhouse 时区转换
Clickhouse 时区转换 ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS). OLAP场景的关键特征 大多数是读请求 数据总是以相当大的批(> 1000 ...