react中隐藏属性

简介: react中隐藏属性

react框架中,渲染用到了JSX语法;JSX元素(标签内)有一个hidden属性,可以判断当前JSX元素是否显示;例如:

render(){

return(

<div> hidden={true}>这是react中的JSX元素</div>

}

hidden 实际操作的是css中的display属性;

hidden属性为true;当前JSX隐藏, 属性为false,不隐藏;

属性值可以为表达式,转换成boolean值;

也可以隐式转换;

hidden={0、""、false、!true} 不隐藏;

hidden={1、true、{}、[]、" “、!false} 隐藏

hidden=”" ,不隐藏(false), 其他字符串均隐藏(true)

注意的是: hidden属性不可直接用在组件中,即不能根据这个来判断组件的显示或隐藏

 

相关文章
|
6月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
6月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
|
2月前
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据,通过Provider和Consumer组件实现数据的提供和消费。
35 3
|
1月前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
39 0
|
2月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
64 13
|
6月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
2月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
69 0
|
3月前
|
JavaScript 前端开发 容器
React组件属性refs(七)
【8月更文挑战第14天】React组件属性refs(七)
51 0
React组件属性refs(七)
|
3月前
|
前端开发 JavaScript
|
6月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
225 0