JSX 中使用 js 表达式

news2025/2/27 1:43:47

学习目标: 能够在 JSX 中使用表达式
语法:
{JS 表达式}

function App() {
  // 1.识别常规变量
  const name = '跟着老惠学前端'
  // 2.原生js方法调用
  const age = () => {
    return 25
  }
  //3.三元运算符
  const flag = true

  return (
    <div className="App">
      {name}
      {age()}
      {flag ? '真棒' : '真菜'}
    </div>
  )
}

export default App

可以使用的表达式
 1.字符串、布尔值、数值、null、undefined、object([]/{})
 2.算数运算(1+2)、字符串方法(“abcde”.split(‘’))、数组方法([‘a’,‘b’].join(‘-’))
 3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句,这些叫做语句,不是表达式,不能书写在{}中!!!

// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
  return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
  <div className="App">
    {name}
    <br />
    {age()}
    <br />
    {flag ? '真棒' : '真菜'}
    <br />
  </div>
)

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1126529.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

webpack前端性能优化的操作有哪些?

一、背景 随着前端的项目逐渐扩大&#xff0c;必然会带来的一个问题就是性能 尤其在大型复杂的项目中&#xff0c;前端业务可能因为一个小小的数据依赖&#xff0c;导致整个页面卡顿甚至奔溃 一般项目在完成后&#xff0c;会通过webpack进行打包&#xff0c;利用webpack对前…

【算法|滑动窗口No.2】leetcode904. 水果成篮

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

信号继电器驱动芯片(led驱动芯片)

驱动继电器需要配合BAV99&#xff08;防止反向脉冲&#xff09;使用 具体应用参考开源项目 电阻箱 sbstnh/programmable_precision_resistor: A SCPI programmable precision resistor (github.com) 这个是芯片的输出电流设置 对应到上面的实际开源项目其设置电阻为1.5K&…

【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导

【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导 系列文章汇总见:《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接:《【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导》 打开 Infineon 工具 默认是没有工程的,需…

Unity之ShaderGraph如何实现全息投影效果

前言 今天我们来实现一个全息投影的效果&#xff0c;如下所示&#xff1a; 主要节点 Position&#xff1a;提供对网格顶点或片段的Position 的访问&#xff0c;具体取决于节点所属图形部分的有效着色器阶段。使用Space下拉参数选择输出值的坐标空间。 Time&#xff1a;提…

Cocos 系列教程 - 01 认识项目结构

(一)项目文件夹结构 初次创建并打开一个 Cocos Creator 项目后,开发者项目文件夹的结构如下: assets:资源目录 build:构建目录(在构建某平台后会生成该目录) library:导入的资源目录 local:日志文件目录 profiles:编辑器配置 temp:临时文件目录 package.js…

Java面向对象(基础)-- 类的成员之三:构造器(Constructor)

文章目录 一、介绍&#xff08;1&#xff09;理解和作用&#xff08;2&#xff09; 构造器的语法格式 二、举例剖析&#xff08;1&#xff09;构造器在哪&#xff08;2&#xff09;权限问题&#xff08;3&#xff09;声明构造器&#xff08;4&#xff09;声明多个构造器&#x…

shell-mysql备份通用脚本

代码&#xff1a; #!/bin/bash#这是一个mysql备份的通用脚本 #颜色设置 RED\E[1;31m GREEN\E[1;32m RES\E[0m#mysql备份参数 DB_USER"root" DB_PASSWORD"123456" DB_HOST"127.0.0.1" DB_NAME"docker" BACKUP_DIR"/mysql/backup/…

多线程与高并发

1.线程创建的3种方式 2.线程的状态切换步骤 3.线程的5中状态 Java中的线程的生命周期大体可分为5种状态。 1. 新建(NEW)&#xff1a;新创建了一个线程对象。 2. 可运行(RUNNABLE)&#xff1a;线程对象创建后&#xff0c;其他线程(比如main线程&#xff09;调用了该对象的sta…

MySQL1:MySQL发展史,MySQL流行分支及其对应存储引擎,MySQL中一条查询SQL语句是如何执行的?MySQL中一条更新SQL是如何执行的?

MySQL1&#xff1a;MySQL发展史&#xff0c;MySQL流行分支及其对应存储引擎&#xff0c;一条查询SQL语句是如何执行的&#xff1f;一条更新SQL是如何执行的&#xff1f; MySQL发展史MySQL流行分支及其对应存储引擎MariaDB-Maria存储引擎Percona Server-XtraDB存储引擎其它存储引…

VS设置dll加载路径

属性配置-调试-环境&#xff1a; 当存在多个dll路径时&#xff0c;需按图示要求保证计算的值如图格式所示&#xff0c;计算的值&#xff1a;PATH%PATH%;路径;路径; 或者PATH路径;路径;%PATH% 由于qt路径为继承的值&#xff0c;所以将其“从父级或项目默认机床”√取消 上图…

RabbitMQ高级篇 笔记

这是一些高级的内容。 RabbitMQ还是运行在网络上的&#xff0c;倘若遇到了网络故障&#xff0c;mq自己挂了&#xff0c;出异常了&#xff0c;都会造成最终状态不一致的问题。这就是可靠性问题。 可靠性&#xff1a;一个消息发送出去之后&#xff0c;至少被消费1次。 要解决这3个…

vue实现响应式改变scss样式

需求&#xff1a;侧边导航栏点击收起&#xff0c;再次点击展开&#xff0c;但是我这个项目的位置是在左侧菜单栏所以需要自定义 效果图&#xff1a; 实现步骤&#xff1a; 1&#xff1a;定义一个变量&#xff08;因为我这里会存储菜单栏的状态所以需要存储状态&#xff0c;一…

c语言的程序环境和预处理(一眼丁真)

前言&#xff1a; 正所谓&#xff0c;万物c为首。在我们较为深入的学完c语言之后&#xff0c;可以说是打开了编程的第一扇大门。代码我们会敲了&#xff0c;可是这些代码到底是咋运行起来的呢&#xff1f;这些源文件&#xff0c;头文件里的代码又是怎么“整合”在一起的呢&…

前端数据可视化之【series、series饼图配置】配置项

目录 &#x1f31f;Echarts配置项&#x1f31f;series&#x1f31f;饼图 type:pie&#x1f31f;写在最后 &#x1f31f;Echarts配置项 ECharts开源来自百度商业前端数据可视化团队&#xff0c;基于html5 Canvas&#xff0c;是一个纯Javascript图表库&#xff0c;提供直观&…

Python装饰器(包装函数、拦截函数)

无参装饰器 decorate: f decorate(f1) f wrapper 有参装饰器 多层装饰器 装饰器带参数 装饰器带参数&#xff0c;3层 案例 import timeisLogin Falsedef login():username input("请输入用户名&#xff1a;")passward input("请输入密码&#xff1a;&q…

HNSW-分层可导航小世界 算法学习

一、knn的缺陷 1. K-NN方法的工作机制 K-Nearest Neighbors (K-NN) 是一种基于实例的分类方法。它通过逐一比较新样本与已有样本的相似度&#xff0c;挑选出与新样本最接近的k个已有样本&#xff0c;然后根据这些样本的类别&#xff0c;通过投票或加权的方式来决定新样本的类…

如何设计实时聊天系统的架构

1. 系统的要求和目标 1.1 功能要求 对话&#xff1a;系统应支持用户之间的一对一和群组对话。确认消息&#xff1a;系统应支持消息传递确认&#xff0c;如已发送、已送达、已读。共享&#xff1a;系统应支持媒体文件的共享&#xff0c;例如图像、视频和音频。聊天存储&#x…

第3章 指令级并行及其利用

3.1 指令级并行&#xff1a;概念和挑战 1985年之后几乎所有处理器都使用流水线来使指令能重叠执行。由于指令可以并行执行&#xff0c;所有指令之间的这种可能得重叠称为指令级并行ILP。 ILP大体有两种实现方法&#xff1a; 1. 依靠硬件来动态发现并实现并行&#xf…

【解决】设置pip安装依赖包路径默认路径在conda路径下,而不是C盘路径下

【解决】设置pip安装依赖包路径默认路径在conda路径下&#xff0c;而不是C盘路径下 问题描述 在win11下安装miniconda&#xff0c;在conda环境里使用pip安装&#xff0c;依赖包总是安装到C盘路径&#xff0c;如 C:\Users\Jimmy\AppData\Local\Programs\Python\Python311\Lib\…