JSX基础 —— 识别JS表达式

AC-PEACE2025-02-28 17:34

在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;