React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React控制元素显示隐藏的方法

React控制元素显示隐藏的三种方法小结

作者:叉叉酱

这篇文章主要介绍了React控制元素显示隐藏的三种方法小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

React控制元素显示和隐藏的方法目前我知道的有三种方法:

方法一

第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不会渲染的。

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

方法二

这个方法很简单,就是通过display属性来控制元素显示和隐藏。

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

方法三

通过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元素,保证了安全性。

React切换显示和隐藏

{radioChange >= 0 &&
          <div>
            {radioChange === 0 ? (
              <div className={style.template} key="1">
                <div className={style.inline}>如果金额超过</div>
                <Input className={style.input} label=" " id="free_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元,免运费,否则按照公里数收取,每公里</div>
                <Input className={style.input} label=" " id="unit_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元,最多不超过</div>
                <Input className={style.input} label=" " id="max_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元</div>
              </div>
            )
             : (
               <div className={style.template} key="2">
                 <div className={style.inline}>如果金额超过</div>
                 <Input className={style.input} label=" " id="free_price" rules={['required']}
                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                 <div className={style.inline}>元,免运费,否则一口价</div>
                 <Input className={style.input} label=" " id="price" rules={['required']}
                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                 <div className={style.inline}>元</div>
               </div>)

            }
          </div>

如上面代码显示,如果通过一个数值控制,显示和隐藏切换的话,必须加入一个key值,否则在切换的时候活报错,应该是在页面渲染的时候会重复利用这个元素,如果加入keys,渲染的时候,不会产生复用

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文