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;
相关推荐
打野赵怀真5 分钟前
H5如何禁止动画闪屏?
前端·javascript
tangweiguo030519875 分钟前
(Kotlin)Android 高效底部导航方案:基于预定义 Menu 和 ViewPager2 的 Fragment 动态绑定实现
android·开发语言·kotlin
Riesenzahn5 分钟前
你喜欢Sass还是Less?为什么?
前端·javascript
ChiaWei Lee13 分钟前
【C语言】深入理解指针(三):C语言中的高级指针应用
c语言·开发语言
最后一个bug14 分钟前
教你快速理解linux中的NUMA节点探测是干什么用的?
linux·c语言·开发语言·arm开发·嵌入式硬件
蒜香拿铁16 分钟前
vue3自动导入组合式api
前端·javascript
frontDeveloper18 分钟前
JavaScript基础知识概览(DOM-API部分)
javascript
Cutey91620 分钟前
解决在 UniApp 中,deep不生效的问题
前端·javascript·面试
阿丽塔~20 分钟前
React.memo()和 useMemo()的用法是什么,有哪些区别
前端·javascript·react.js
习惯灬21 分钟前
ES6对象新增了哪些扩展?
前端·javascript