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;
相关推荐
毕设源码-朱学姐10 分钟前
【开题答辩全过程】以 python基于Hadoop的服装穿搭系统的设计与实现为例,包含答辩的问题和答案
开发语言·hadoop·python
爱砸键盘的懒洋洋24 分钟前
Python第四课:数据类型与转换
开发语言·python
岁月宁静39 分钟前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
维度攻城狮43 分钟前
C++中的多线程编程及线程同步
开发语言·c++·性能优化·多线程·线程同步
拾光Ծ1 小时前
【C++哲学】面向对象的三大特性之 多态
开发语言·c++·面试
大飞pkz1 小时前
【设计模式】解释器模式
开发语言·设计模式·c#·解释器模式
Dyan_csdn1 小时前
Python系统设计选题-49
开发语言·python
草莓熊Lotso2 小时前
《回溯 C++98:string 核心机制拆解 —— 从拷贝策略到高效 swap》
开发语言·c++
2401_831501732 小时前
Python学习之day01学习(变量定义和数据类型使用)
开发语言·python·学习
数智顾问2 小时前
Java坐标转换的多元实现路径:在线调用、百度与高德地图API集成及纯Java代码实现——纯Java代码实现与数学模型深度剖析
java·开发语言