【React】JSX：从基础语法到高级用法的深入解析

news2024/11/15 21:32:33

文章目录

- 一、什么是 JSX？
- - 1. 基础语法
  - 2. 嵌入表达式
  - 3. 使用属性
  - 4. JSX 是表达式
- 二、JSX 的注意事项
- - 1. 必须包含在单个父元素内
  - 2. JSX 中的注释
  - 3. 避免注入攻击
- 三、JSX 的高级用法
- - 1. 条件渲染
  - 2. 列表渲染
  - 3. 内联样式
  - 4. 函数作为子组件
- 四、最佳实践

在 React 开发中，JSX 是一个核心概念。JSX 允许我们在 JavaScript 代码中直接编写类似 HTML 的代码，使得组件的构建和维护变得更加直观和高效。本文将详细介绍 JSX 的基础语法、注意事项以及高级用法，帮助你深入理解和掌握 JSX。

一、什么是 JSX？

JSX（JavaScript XML）是一种语法扩展，它让我们可以在 JavaScript 中编写类似 HTML 的代码。它与 JavaScript 紧密结合，并在编译时被转换为 JavaScript 对象。

1. 基础语法

JSX 的语法与 HTML 非常相似，但存在一些差异。例如，在 JSX 中，所有的标签必须闭合，自闭合标签需要添加斜杠。

// 正确的 JSX 语法
const element = <h1>Hello, world!</h1>;

// 自闭合标签
const image = <img src="logo.png" alt="Logo" />;

2. 嵌入表达式

在 JSX 中，我们可以使用大括号 {} 来嵌入 JavaScript 表达式。任何有效的 JavaScript 表达式都可以放在大括号内。

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

3. 使用属性

在 JSX 中，可以像在 HTML 中一样使用属性，但需要注意的是，属性名采用 camelCase 命名，而不是 HTML 中的 kebab-case。

const element = <img src="logo.png" className="logo" alt="Logo" />;

4. JSX 是表达式

JSX 本质上是 JavaScript 的表达式。这意味着我们可以在 if 语句和 for 循环中使用 JSX，将其赋值给变量，作为参数传递，以及作为函数的返回值。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {user.name}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

二、JSX 的注意事项

1. 必须包含在单个父元素内

JSX 表达式必须有一个父元素包裹。如果要返回多个元素，可以使用 <div> 或者 React 提供的 <React.Fragment> 来包裹。

// 错误的 JSX 语法
const element = (
  <h1>Hello, world!</h1>
  <h2>Welcome to learning React.</h2>
);

// 正确的 JSX 语法
const element = (
  <div>
    <h1>Hello, world!</h1>
    <h2>Welcome to learning React.</h2>
  </div>
);

// 使用 React.Fragment
const element = (
  <React.Fragment>
    <h1>Hello, world!</h1>
    <h2>Welcome to learning React.</h2>
  </React.Fragment>
);

2. JSX 中的注释

在 JSX 中添加注释需要使用大括号和 JavaScript 注释语法。

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

3. 避免注入攻击

React 会自动对嵌入在 JSX 中的所有值进行转义，防止注入攻击。这意味着我们无法通过 JSX 插入恶意代码。

const title = response.potentiallyMaliciousInput;
// 该 JSX 是安全的
const element = <h1>{title}</h1>;

三、JSX 的高级用法

1. 条件渲染

在 JSX 中，可以使用 JavaScript 的条件操作符来实现条件渲染。

使用三元运算符

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;

使用 && 操作符

const unreadMessages = ['React', 'Re: React', 'Re:Re: React'];
const element = (
  <div>
    <h1>Hello!</h1>
    {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}
  </div>
);

2. 列表渲染

使用 Array.prototype.map() 方法可以轻松地在 JSX 中渲染列表。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

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

3. 内联样式

在 JSX 中应用样式可以使用对象语法，属性名采用 camelCase。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

const element = <div style={divStyle}>Styled div</div>;

4. 函数作为子组件

可以将函数作为子组件传递，从而实现更灵活的组件渲染。

function WelcomeDialog(props) {
  return (
    <Dialog>
      {props.children}
    </Dialog>
  );
}

function App() {
  return (
    <WelcomeDialog>
      {name => <h1>Hello, {name}!</h1>}
    </WelcomeDialog>
  );
}