资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

react怎么显示隐藏

react显示隐藏的方法:1、通过state变量来控制是否渲染元素,类似vue中的【v-if】;2、通过style控制display属性,类似vue中的【v-show】;3、通过动态切换className。

创新互联服务项目包括安达网站建设、安达网站制作、安达网页制作以及安达网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,安达网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到安达省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

react显示隐藏的方法:

方法一:

第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不会渲染的。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            
{ this.state.showElem?(
显示的元素
):null }
) } }

方法二:

这个方法很简单,就是通过display属性来控制元素显示和隐藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            
显示的元素
) } }

方法三:

通过className切换hide来实现元素的显示和隐藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            
{/* 写法一 */}
显示的元素
{/* 写法二 */}
显示的元素
) } }

要注意的是,这几种方法也有使用的区别:

方法一不适合频繁控制显示隐藏的情况,因为他会重新渲染元素,比较耗费性能。在这种情况下,第二种或者第三种通过display来控制会更合理。

方法一适合安全性高的页面,比如用户信息页面,根据不同的用户级别显示不一样的内容,这时候如果你用方法一或者方法二的话,用户如果打开network还是可以看见,因为页面还是渲染了,只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素,保证了安全性。

相关免费学习推荐:JavaScript(视频)


文章标题:react怎么显示隐藏
URL分享:http://cdkjz.cn/article/cjsigp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220