React学习教程，从入门到精通， React 入门指南：React JSX 语法知识点详解及案例代码(8）

React JSX 语法知识点详解及案例代码

JSX（JavaScript XML）是 React 中的一种语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构。它使得组件的编写更加直观和简洁。

一、JSX 语法知识点

1. 基本语法

JSX 允许在 JavaScript 中直接编写类似 HTML 的标签。例如：

jsx 复制代码

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

2. 表达式插值

使用花括号 {} 可以在 JSX 中嵌入 JavaScript 表达式，如变量、函数调用等。

jsx 复制代码

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

3. 属性（Props）

在 JSX 中，属性使用类似 HTML 的语法传递，但属性名使用驼峰命名法（camelCase）。

jsx 复制代码

const element = <img src={user.avatarUrl} alt="User Avatar" />;

4. 嵌套元素

JSX 支持嵌套元素，必须有一个根元素包裹所有子元素。

jsx 复制代码

const element = (
  <div>
    <h1>Title</h1>
    <p>Content goes here.</p>
  </div>
);

5. 条件渲染

可以使用 JavaScript 的条件运算符、三元运算符或逻辑运算符在 JSX 中进行条件渲染。

jsx 复制代码

const isLoggedIn = true;
const element = <div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}</div>;

6. 列表渲染

使用 map 方法遍历数组并生成 JSX 元素列表。

jsx 复制代码

const items = ["Apple", "Banana", "Cherry"];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);
const element = <ul>{listItems}</ul>;

7. 事件处理

在 JSX 中，事件处理使用驼峰命名法，并传递函数作为事件处理器。

jsx 复制代码

function handleClick() {
  alert("Clicked!");
}
const element = <button onClick={handleClick}>Click Me</button>;

8. 样式（Styles）

可以通过 style 属性传递一个对象来设置内联样式，或者使用 className 属性添加 CSS 类。

jsx 复制代码

const style = { color: "blue", fontSize: "16px" };
const element = <p style={style}>Styled Text</p>;

或者：

jsx 复制代码

const element = <p className="styled-paragraph">Styled Text</p>;

9. 注释

在 JSX 中使用 {} 包裹注释：

jsx 复制代码

const element = (
  <div>
    {/* 这是一个注释 */}
    <p>Hello, world!</p>
  </div>
);

10. 片段（Fragments）

使用 <React.Fragment> 或简写 <> 和 </> 来包裹多个元素而不增加额外的 DOM 节点。

jsx 复制代码

const element = (
  <>
    <p>First item</p>
    <p>Second item</p>
  </>
);

二、详细案例代码

以下是一个包含上述知识点的 React 组件示例，包含详细注释。

jsx 复制代码

// 导入 React 库
import React from "react";

// 定义一个函数组件 App
const App = () => {
  // 定义一些变量和数组
  const user = {
    name: "张三",
    age: 25,
    avatarUrl: "https://via.placeholder.com/150",
  };

  const items = ["苹果", "香蕉", "樱桃", "日期", "无花果"];

  // 定义事件处理函数
  const handleClick = () => {
    alert(`你好，${user.name}！`);
  };

  // 定义样式对象
  const buttonStyle = {
    backgroundColor: "#4CAF50",
    color: "white",
    padding: "10px 20px",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  };

  const paragraphStyle = {
    fontSize: "16px",
    color: "#333",
    marginBottom: "20px",
  };

  return (
    // 使用 React.Fragment 包裹多个元素
    <React.Fragment>
      {/* 条件渲染：根据用户年龄显示不同的消息 */}
      {user.age >= 18 ? (
        <p style={paragraphStyle}>
          欢迎，{user.name}！您已成年。
        </p>
      ) : (
        <p style={paragraphStyle}>
          欢迎，{user.name}！您未成年。
        </p>
      )}

      {/* 列表渲染：显示水果列表 */}
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

      {/* 事件处理：按钮点击事件 */}
      <button style={buttonStyle} onClick={handleClick}>
        点击我
      </button>

      {/* 内联样式和嵌套元素 */}
      <div style={{ marginTop: "30px", padding: "10px", border: "1px solid #ccc" }}>
        <h2>用户信息</h2>
        <img src={user.avatarUrl} alt={`${user.name}的头像`} style={{ width: "100px", height: "100px", borderRadius: "50%" }} />
        <p>姓名: {user.name}</p>
        <p>年龄: {user.age}</p>
      </div>
    </React.Fragment>
  );
};

// 导出 App 组件
export default App;

代码详解

导入 React
jsx 复制代码
```
import React from "react";
```
React 库是构建 React 组件的基础。
定义函数组件
jsx 复制代码
```
const App = () => {
  // ...
};
```
使用函数组件定义 App，这是 React 组件的一种形式。
定义数据和函数
jsx 复制代码
```
const user = { ... };
const items = [ ... ];
const handleClick = () => { ... };
const buttonStyle = { ... };
const paragraphStyle = { ... };
```
- user 对象包含用户信息。
- items 数组包含水果列表。
- handleClick 函数处理按钮点击事件。
- buttonStyle 和 paragraphStyle 对象用于内联样式。

条件渲染

jsx 复制代码

{user.age >= 18 ? (
  <p style={paragraphStyle}>欢迎，{user.name}！您已成年。</p>
) : (
  <p style={paragraphStyle}>欢迎，{user.name}！您未成年。</p>
)}

根据 user.age 的值，渲染不同的消息。

列表渲染
jsx 复制代码
```
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>
```
使用 map 方法遍历 items 数组，生成列表项。key 属性用于帮助 React 识别每个元素。
事件处理
jsx 复制代码
```
<button style={buttonStyle} onClick={handleClick}>
  点击我
</button>
```
按钮点击时触发 handleClick 函数，弹出欢迎消息。

内联样式

jsx 复制代码

<div style={{ marginTop: "30px", padding: "10px", border: "1px solid #ccc" }}>
  ...
</div>

使用内联样式设置 div 的样式。

嵌套元素

jsx 复制代码

<div>
  <h2>用户信息</h2>
  <img src={user.avatarUrl} alt={`${user.name}的头像`} style={{ ... }} />
  <p>姓名: {user.name}</p>
  <p>年龄: {user.age}</p>
</div>

嵌套多个元素展示用户信息。

片段（Fragments）
jsx 复制代码
```
<React.Fragment>
  ...
</React.Fragment>
```
使用 React.Fragment 包裹多个元素，避免在 DOM 中生成额外的节点。也可以使用简写 <> 和 </>。

三、运行效果

上述代码在 React 应用中运行后，将呈现以下内容：

欢迎消息：根据用户的年龄显示不同的欢迎信息。
水果列表：显示一个包含多个水果名称的无序列表。
按钮：点击按钮会弹出包含用户姓名的欢迎消息。
用户信息：展示用户的头像、姓名和年龄。

四、总结

JSX 是 React 中强大的语法扩展，提供了简洁且直观的方式来编写组件。通过掌握 JSX 的基本语法、表达式插值、属性传递、条件渲染、列表渲染、事件处理、样式设置以及片段的使用，可以有效地构建复杂的 React 应用。