React控制元素显示隐藏的三种方法小结
更新时间：2022年12月02日 09:02:33 作者：叉叉酱
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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 (
<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，渲染的时候，不会产生复用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
ES6 class类链式继承，实例化及react super(props)原理详解
这篇文章主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了React事件监听和State状态修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于React中如何引入Angular组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了react高阶组件添加和删除props，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了React函数组件和类组件的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常，特别是React中箭头函数使用这块，下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了React在弱网环境下限制按钮多次点击,防止重复提交问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了useEffect中为什么不能使用async的原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Remix中mdx table不支持表格问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论