react怎么显示隐藏(2)-木庄网络博客

通过className切换hide来实现元素的显示和隐藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 写法一 */}
                <div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div>
            </div>
        )
    }
}

要注意的是，这几种方法也有使用的区别：

方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。
方法一适合安全性高的页面，比如用户信息页面，根据不同的用户级别显示不一样的内容，这时候如果你用方法一或者方法二的话，用户如果打开network还是可以看见，因为页面还是渲染了，只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素，保证了安全性。