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;
相关推荐
小赖同学啊3 分钟前
光伏园区3d系统管理
前端·javascript·3d
Sally璐璐8 分钟前
IPSAN 共享存储详解:架构、优化与落地实践指南
开发语言·php
前端进阶者10 分钟前
js通知提醒
前端·javascript
像风一样的男人@18 分钟前
python --货车装厢问题
开发语言·python
快起来别睡了23 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
Humbunklung25 分钟前
Rust枚举:让数据类型告别单调乏味
开发语言·后端·rust
Y1nhl28 分钟前
力扣_链表_python版本
开发语言·python·算法·leetcode·链表·职场和发展
Goodbaibaibai33 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
OEC小胖胖41 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
胡gh43 分钟前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js