How to control display and hide in react

Methods for controlling display and hiding in react: 1. Control whether to render elements through state variables; 2. Control the display attribute through style; 3. Dynamically switch className.

The operating environment of this tutorial: windows7 system, React17 version, Dell G3 computer.

Methods for controlling display and hiding in react:

1. Use state variables to control whether to render elements

Similar to vue'sv The -if

method uses variables to control whether to load elements. If the variable is false, the content will not be rendered directly.

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

2. Control the display attribute through style

Similar to v-show in vue

Control the display and hiding of elements through the display attribute

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.isShow}}>显示的元素</div>
        )
    }
}

3. By dynamically switching className

Switch the class name through className to display and hide elements.

//.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>
        )
    }
}

Related free learning recommendations: javascript (video)

The above is the detailed content of How to control display and hide in react. For more information, please follow other related articles on the PHP Chinese website!