跳到主要内容

第3章：JSX语法

简要说明​

JSX（JavaScript XML）是React中用于描述用户界面的一种语法扩展。它结合了HTML的语法规则和JavaScript的功能，使我们可以更直观地编写React组件的结构。通过JSX，我们可以直接在JavaScript代码中书写类似HTML的结构，从而简化了React组件的开发过程。

在React中，JSX被广泛应用于组件的渲染逻辑中。它并不是HTML，而是会被编译成React.createElement()函数调用的一种语法糖。因此，理解JSX的语法规则和它与HTML的区别是我们学习React的重要一步。

关键知识点​

1. JSX的基本语法规则​

（1）基本结构​

JSX的基本结构类似于HTML标签，但可以直接嵌入JavaScript表达式。一个简单的JSX示例：

<Button color="primary">Click Me</Button>

（2）自闭合标签​

类似于HTML，JSX中的自闭合标签用于表示没有子元素的组件：

<Input type="text" />

（3）属性赋值​

JSX中的属性值可以直接使用JavaScript表达式：

<div className={isActive ? 'active' : 'inactive'}>
  Hello React
</div>

（4）多行表达式​

如果JSX结构较为复杂，可以使用括号将多行内容包裹起来：

<div>
  <h1>Hello React</h1>
  <p>Welcome to JSX syntax!</p>
</div>

（5）首字母大写​

JSX中的标签名必须以大写字母开头，这与HTML标签不同：

<MyComponent />  {/* 正确 */}
<mycomponent />  {/* 错误 */}

（6）转义规则​

JSX会被编译为React.createElement()函数调用，例如：

<div>Hello JSX</div>

编译后会变为：

React.createElement('div', null, 'Hello JSX');

2. JSX与HTML的区别​

虽然JSX看起来很像HTML，但它们之间存在一些关键区别：

（1）元素名的大小写​

JSX中的标签名必须以大写字母开头，否则会被认为是HTML原生标签。

（2）属性赋值方式​

  • 在HTML中，属性值直接写在标签中，例如<img src="example.jpg">。
  • 在JSX中，属性值通常是一个JavaScript表达式，使用大括号包裹，例如<img src={'/assets/example.png'} />。

（3）注释​

  • HTML注释：<!-- 这是一个HTML注释 -->

  • JSX注释：必须使用JavaScript注释格式，只能使用单行注释//或块注释/* */，并且需要用大括号包裹：

    <div>
      {/* 这是一个JSX注释 */}
    </div>

（4）JavaScript表达式​

JSX支持在标签中嵌入JavaScript表达式，这是JSX区别于HTML的重要特点，例如：

<text>${name}</text>  {/* 错误：HTML的写法 */}
<hello>{name}</hello>  {/* 正确：JSX的写法 */}

3. 在JSX中嵌入JavaScript表达式​

在JSX中，我们可以通过大括号{}来嵌入JavaScript表达式。以下是几种常见的嵌入方式：

（1）简单的JavaScript表达式​

可以在JSX中直接嵌入变量、函数调用或其他简单的表达式。

function App() {
  const greeting = 'Hello React!';
  return (
    <div>
      {greeting}
    </div>
  );
}

（2）复杂的JavaScript表达式​

JSX支持嵌入条件判断、循环、函数调用等复杂的JavaScript表达式。

function App() {
  const isUserLoggedIn = true;
  return (
    <div>
      {isUserLoggedIn ? 'Welcome back!' : 'Please log in.'}
    </div>
  );
}

（3）对象和数组​

可以在JSX中嵌入JavaScript对象和数组：

const user = {
  name: 'Alice',
  age: 30
};

function App() {
  return (
    <div>
      {user.name}, {user.age}
    </div>
  );
}

（4）注意事项​

  • 只能在JSX中嵌入JavaScript表达式，不能直接嵌入语句（如if语句）。
  • 如果需要嵌入多行表达式，可以使用()包裹。

（5）内联样式​

在JSX中，可以使用JavaScript对象来动态设置内联样式：

function App() {
  const styles = {
    color: 'blue',
    fontSize: '20px'
  };
  return (
    <div style={styles}>
      Styled text
    </div>
  );
}

总结​

通过本章的学习，我们掌握了JSX语法的基本概念、语法规则及其与HTML的区别，并了解了如何在JSX中嵌入JavaScript表达式。这些知识是后续学习React组件开发的基础。掌握JSX的语法不仅能够帮助我们更高效地编写React组件，还能为理解React的底层原理打下基础。

接下来，我们将进入第4章，学习React组件的创建与渲染。