React控制元素显示隐藏的方式

React控制元素显示和隐藏的方法如下:
第一种是通过state变量来控制是否渲染元素,类似vue中的v-if。
第二种是通过style控制display属性,类似vue 中的v-show。
第三种是通过动态切换className。

方法一:
第一种方法是通过此例中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 (


{/* 写法一 /}
显示的元素

{/ 写法二 */}
${this.state.showElem?'':'hide'} word-style}>显示的元素

)
}
}
区别:
方法一不适合频繁控制显示隐藏的情况,因为他会重新渲染元素,比较耗费性能。在这种情况下,第二种或者第三种通过display来控制会更合理。
方法一适合安全性高的页面,比如用户信息页面

你可能感兴趣的:(前端,react,html,js)