2. React JSX 语法React JSX（JavaScript XML）是 JavaScript 的一种扩展语

React JSX 语法

在 React 中，JSX（JavaScript XML）是 JavaScript 的一种 语法扩展，它允许你在 JavaScript 中编写 类似 HTML 的代码，并将其转化为 React 元素。

1 JSX 基本语法

JSX 看起来像 HTML，但它实际上是 JavaScript 对象。

React 会将 JSX 转换为 React.createElement() 调用。React 组件 通常 返回 JSX 元素。

const element = <h1>Hello, world!</h1>;

// 上面代码 实际上是 React 内部是调用的
const element = React.createElement('h1', null, 'Hello, world!');

2 JSX 中嵌入 JavaScript 表达式

在 JSX 中，你可以嵌入 JavaScript 表达式，这些表达式需要被 包裹在 {} 中。你可以插入变量、函数调用等。

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

3 JSX 属性

JSX 属性 类似于 HTML 属性，但有些属性名是不同的。例如，class 在 JSX 中被写作 className，for 被写作 htmlFor。

const element = <div className="container">Hello, World!</div>;

4 JSX 中的条件渲染

你可以使用 JavaScript 表达式（如 三元运算符、if 语句等）在 JSX 中进行 条件渲染。

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>; // 三元运算符

或者使用 && 运算符来渲染元素：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn && <button>Log out</button>} // 逻辑运算符
  </div>
);

5 JSX 元素必须有一个根元素

在 JSX 中，每个组件 返回的 JSX 必须有 一个根元素。如果你有 多个元素，它们需要被包裹在 一个父元素中，例如 <div>，或者使用 React.Fragment 来避免不必要的额外元素。

const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </div>
);

如果你不想增加额外的 DOM 元素，可以使用 React.Fragment：

const element = (
  <React.Fragment>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </React.Fragment>
);

// 或者简写形式
const element = (
  <>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </>
);

6 JSX 中的事件处理

JSX 中的事件处理与 JavaScript 中的事件处理类似，但 事件名称 遵循 camelCase 命名规则。例如，HTML 中的 onclick 在 JSX 中变为 onClick。

function handleClick() {
  alert('Button clicked!');
}

const element = <button onClick={handleClick}>Click me</button>;

7 JSX 中的子组件

在 JSX 中，你可以 嵌套组件，就像嵌套 HTML 元素一样。你可以将一个组件 作为子组件 传递给 另一个组件。

// 组件 Welcome
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" /> {/* 子组件 Welcome */} 
      <Welcome name="Bob" /> {/* 子组件 Welcome */} 
    </div>
  );
}

8 JSX 中的注释

在 JSX 中 添加注释 与 JavaScript 中的注释 稍有不同。你不能直接使用 （HTML 的注释方式），而是需要将注释 包裹在 {/* */} 中。

const element = (
  <div>
    {/* This is a comment */}
    <h1>Hello, World!</h1>
  </div>
);

9 JSX 中的属性类型

React 允许你使用 PropTypes 来定义组件的 属性类型。PropTypes 可以帮助你检查传递给组件的 props 类型。

import PropTypes from 'prop-types';

function Greeting({ name, age }) {
  return <h1>Hello, {name}. You are {age} years old.</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

10 JSX 中的 `key` 属性

key 是 React 中用于标识 组件列表 中的 每个元素 的 特殊属性。它帮助 React 高效地更新 UI。当你渲染列表时，应该为每个元素指定一个 唯一的 key。

const items = ['Apple', 'Banana', 'Cherry'];

const listItems = items.map((item, index) => 
  <li key={index}>{item}</li>
);

const element = <ul>{listItems}</ul>;

2. React JSX 语法