react实现div隐藏_react如何控制显示与隐藏

react控制显示与隐藏的方法：1、通过state变量来控制是否渲染元素；2、通过style控制display属性；3、通过动态切换className。

本教程操作环境：windows7系统、React17版，该方法适用于所有品牌电脑。

react控制显示与隐藏的方法：

1、通过 state 变量来控制是否渲染元素

类似于 vue 的 v-if

方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。class Demo extends React.Component{

constructor(props){

super(props);

this.state = {

isShow:true

}

render(){

return (

{

this.state.isShow?(

显示的元素

):null

}

)

}

2、通过 style控制 display 属性

类似于 vue 中的 v-show

通过 display 属性来控制元素显示与隐藏class Demo extends React.Component{

constructor(props){

super(props);

this.state = {

isShow:'none'

}

render(){

return (

显示的元素

)

}

3、通过动态切换className

通过className切换类名来实现元素的显示和隐藏。//.css文件

.is-show{

display:none

}

//.js文件

class Demo extends React.Component{

constructor(props){

super(props);

this.state = {

isShow:true

}

render(){

return (

// 写法一

显示的元素

// 写法二

显示的元素

)

}

}相关免费学习推荐：javascript(视频)

react实现div隐藏_react如何控制显示与隐藏相关推荐

设置input隐藏并用js控制显示和隐藏
style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...
html页面按钮隐藏div显示,javascript 控制 DIV等html元素的显示和隐藏
1.编写 js函数 function display(id){ var traget=document.getElementById(id); if(traget.style.display==&qu ...
高德api覆盖区域由层级控制显示和隐藏
这个是一个区域化的从外面请求的json然后在给到高德先看一下外部的JSON [{"name": "11","areas": [[121. ...
HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层
$(document).ready(function(){ $("#div1").hide(); //先将层隐藏起来 var canHide = false; //标记是否可隐 ...
HTML有displaynone无法隐藏,display：none显示和隐藏
显示和隐藏问题 #a{ width: 500px; height: 300px; background-color: red; /*display:none;*/ visibility:hidden; ...
easyui 隐藏input_easyui datagrid 列显示和隐藏
//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...
div控制显示与隐藏状态的两种方式
要点: 1.本人原来用的是IDEA编译器,因为什么环境都配置好了,代码提示功能也好,界面也优美,可惜什么都好导致太庞大.本人在自习室敲代码,笔记本电池管不了一上午,后用sublime,真轻便哈哈.但是 ...
AntV G6流程图节点控制显示和隐藏
1.点击隐藏,控制隐藏节点4以及相关的边 2.点击显示,显示节点4以及相关的边 3.点击添加颜色,给指定节点4添加颜色 demo如下: <!DOCTYPE html> <html&g ...
html设置文字超过字数_css+div解决文字溢出控制显示字数
看到标题你一定很轻易就会想到截断文字加"..."的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下 ...

react实现div隐藏_react如何控制显示与隐藏

react实现div隐藏_react如何控制显示与隐藏相关推荐

最新文章

热门文章