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 ( 
 { this.state.isShow?( 
显示的元素
 ):null } 
 ) } }

2. Control the display attribute through style

Similar tov-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 ( 
显示的元素
 ) } }

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 ( 
 // 写法一 
显示的元素
 // 写法二 
显示的元素
 
 ) } }

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!