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属性不可直接用在组件中,即不能根据这个来判断组件的显示或隐藏

 

相关文章
|
1月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
1月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
|
1月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
1月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
85 0
|
5天前
|
前端开发
React三大属性
React三大属性
6 0
|
1月前
|
前端开发
React 函数组件与类组件属性默认值
React 函数组件与类组件属性默认值
24 0
|
1月前
|
前端开发
【React学习】—组件三大核心属性: state(七)
【React学习】—组件三大核心属性: state(七)
|
7月前
|
资源调度 前端开发 C++
从零开始学习React-属性绑定(三)
从零开始学习React-属性绑定(三)
36 0
|
9月前
|
存储 前端开发 JavaScript
【React】组件三大核心属性
【React】组件三大核心属性
|
10月前
|
存储 前端开发 JavaScript
React 三大属性之state的使用详解
React 三大属性之state的使用详解