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;
相关推荐
✿ ༺ ོIT技术༻6 分钟前
笔试强训:Day2
开发语言·c++·笔记·算法
Jackson@ML1 小时前
如何快速高效学习Python?
开发语言·python
西瓜本瓜@2 小时前
在Android中如何使用Protobuf上传协议
android·java·开发语言·git·学习·android-studio
UFIT2 小时前
Python函数与模块笔记
开发语言·python
机智的人猿泰山3 小时前
java kafka
java·开发语言·kafka
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
Y1nhl3 小时前
搜广推校招面经八十一
开发语言·人工智能·pytorch·深度学习·机器学习·推荐算法·搜索算法
Algorithm15763 小时前
谈谈接口和抽象类有什么区别?
java·开发语言
yu4106213 小时前
Rust 语言使用场景分析
开发语言·后端·rust
良艺呐^O^3 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app