Rumah >hujung hadapan web >tutorial js >react如何控制显示与隐藏

react如何控制显示与隐藏

coldplay.xixi
coldplay.xixiasal
2020-12-02 16:34:407810semak imbas

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

react如何控制显示与隐藏

本教程操作环境:windows7系统、React17版,Dell G3电脑。

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 属性来控制元素显示与隐藏

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:&#39;none&#39;
        }
    }
    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?&#39;old&#39;:&#39;old is-show&#39;}>显示的元素</div>
              // 写法二
              <div className={`${this.state.isShow?&#39;&#39;:&#39;is-show&#39;} old`}>显示的元素</div>
            </div>
        )
    }
}

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

Atas ialah kandungan terperinci react如何控制显示与隐藏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:jQuery focus()怎么用Artikel seterusnya:怎么修改react的antd默认样式