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

目录React控制元素显示隐藏的方法方法一方法二方法三React切换显示和隐藏总结React控制元素显示隐藏的方法React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来...

目录

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>
        {/* 写法一 */php}
        <div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div>
        {/* 写法二 */}
        <div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div>
      </div>
    )
  }
}

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

方法一不适合频繁控制显python示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过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，渲染的时候，不会产生复用

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。