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;
相关推荐
JohnYan1 分钟前
Bun技术评估 - 16 Package Manager
javascript·后端·bun
awonw39 分钟前
[python][flask]Flask-Principal 使用详解
开发语言·python·flask
潼心1412o1 小时前
C语言(长期更新)第6讲:函数
c语言·开发语言
拾光拾趣录1 小时前
从“祖传”构造函数到 `class`
前端·javascript
yvvvy1 小时前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn1 小时前
Cropper.js:JS图像裁剪库
前端·javascript
Danny_FD1 小时前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip2 小时前
闭包实现一个简单Vue3的状态管理
前端·javascript
ZL不懂前端2 小时前
使用 React + Konva 构建交互式立方体绘制工具
react.js·ecmascript 6
Enddme2 小时前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试