JSX基础 —— 识别JS表达式

在JSX中可以通过 大括号语法 { } 识别JS中的表达式 ,比如常见的变量、函数调用、方法调用等等

1、使用引号传递字符串

2、使用JavaScript变量

3、函数调用和方法调用

(函数和方法本质没有区别,这里默认: 函数是自己定义的,方法是内置或第三方的)

4、使用JavaScript对象

注意 :++if 语句、switch 语句、变量声明属于语句,不是表达式,不能出现在 { } 中++

使用示例:

javascript 复制代码
const count = 100;

function getName() {
  return 'zhangsan';
}

function App() {
  return (
    <div className="App">

      this is App

      {/* 使用引号传递字符串 */}
      {'this is message'}

      {/* 识别js变量 */}
      {count}

      {/* 函数(自己定义的)调用,直接展示函数的return值 */}
      {getName()}

      {/* 方法(内置的)调用 */}
      {new Date().toLocaleString()}

      {/* 使用js对象,一般在使用内联样式的时候使用 */}
      <div style={{ color: 'red' }}>this is red</div>

    </div>
  );
}

export default App;
相关推荐
liu****16 分钟前
4.基础开发工具(一)
linux·开发语言·1024程序员节
文火冰糖的硅基工坊16 分钟前
[人工智能-大模型-72]:模型层技术 - 模型训练六大步:①数据预处理 - 基本功能与对应的基本组成函数
开发语言·人工智能·python
小龙报21 分钟前
《C语言疑难点 --- 字符函数和字符串函数专题(上)》
c语言·开发语言·c++·算法·学习方法·业界资讯·visual studio
凭君语未可26 分钟前
深度解析Java的多态特性
java·开发语言
Cory.眼29 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
csbysj202037 分钟前
DTD 元素:XML 与 SGML 文档结构解析指南
开发语言
傻童:CPU1 小时前
C语言练习题
c语言·开发语言
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
极地星光1 小时前
协程:实战与系统集成(高级篇)
开发语言
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript