react如何控制元素的显示与隐藏功能?

react如何控制元素显示与隐藏?在vue中常用v-if和v-show指令。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:'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>
        )
    }}

第一种方法不适合频繁控制显示隐藏的情况,因为它会重新渲染元素,比较耗费性能。

更多web前端知识,请查阅 HTML中文网 !!

以上就是react如何控制元素的显示与隐藏功能?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏