react-jsx基础使用02

react05

jsx的语法基础应用 - 2

{}: 此语法中使用不同类型值的时候可以具体效果

  • number(Infinity) 、string类型 : 内容是什么就呈现什么
  • boolean、undefined、null 、bigint(10n)、 symbol: 渲染效果为空白
  • 普通对象类型: {a : 1} ==> 报错: Objects are not valid as a React , 普通对象不支持渲染
  • 数组:[10,20] 数组中的每个元素都会分别渲染,并不会变成字符串渲染,但是没有逗号
    • 数组中的元素不能是普通对象,会报错
    • 对象中除了数组对象,和虚拟dom对象可以渲染,其他的实例对象,时间对象。。。都不支持渲染
  • 函数对象:可以渲染,但是要作为函数组件来渲染,使用方式渲染,不能使用 { }

给元素添加样式 :

  • 行内样式 :style = {} {}语法中放值,值是一个对象所以有两层
    • style = {{ 键值对,键名使用驼峰命名法、值必须为字符串 }}

    • 设置样式类名: 不在使用class,使用className

需求应用

  • 场景一:通过一个变量俩控制元素的显示和隐藏,或控制元素中展示的内容(皆以按钮元素为例,三目判断的联系)

    • 效果图

    • 对比 isShow 为 false时 两者的渲染情况

    • 样式控制显示隐藏,无论是否展示样式变而已,元素都已经创建了,三目控制的元素本身的的创建销毁,两者比较来说,

  • 场景二:服务端拿到数据data,格式为数组包对象,使用数据来进行元素的循环创建

    • 明确一点:react中的循环需要使用数组的具有返回值的迭代方法,jsx中绑定变量的用法,{}语法

  • 扩展,此时没有获取数组数据,在创建一个列表
    • new Array(5) ===> 可以通过new关键字,构建一个数组实例,注意,使用此方法时如果只传入一个元素且此元素为number类型,这表示构建一个指定长度的稀疏数组,每个元素都为空(empty), 此时的数组不支持使用数组的迭代方法,但可基于数组使用fill()给稀疏数组填充值,使其变为紧密数组

    • 看图可知稀疏数组,在执行filter时没有打印,变为紧密数组后执行filter就有了打印,[empty , empty] !== [null , null] , null本事就是值,empty就是空,nothing


相关推荐
长风清留扬8 分钟前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web1478621072321 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478022 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖25 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案133 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548838 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
用户305875848912539 分钟前
Connected-react-router核心思路实现
react.js
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架