Vue转React中JSX小结

Vue转 React 的过程中，首先需要了解 React 中的 JSX（JavaScript XML）。它在 React 中扮演着类似于 Vue 模板语法的角色。以下是详细而全面的 JSX 总结，帮助你快速上手。

1. 什么是 JSX？

JSX介绍
JSX 是一种 JavaScript 的语法扩展，它允许在 JavaScript 代码中编写类似 XML/HTML 的语法。这使得在 React 中声明组件的 UI 结构变得更加直观，JSX 是 React 的核心功能之一。

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

2. JSX 的核心规则

2.1 JSX 需要用一个父标签包裹

JSX 中的代码片段必须被单一的父标签包裹，因为它会被编译成 React.createElement()，而这个函数期望返回单一的根元素。

// 错误：会抛出语法错误
return (
  <h1>Title</h1>
  <p>Description</p>
);

// 正确：用一个 div 包裹所有元素
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

Fragment 也可以作为包裹元素：

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

2.2 JSX 表达式

JSX 中可以直接在大括号 {} 中插入 JavaScript 表达式。任何合法的 JavaScript 表达式都可以放在其中，包括变量、函数调用、三元表达式等。

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

2.3 JSX 中的属性

• 在 JSX 中，属性的命名方式采用驼峰命名法，比如 class 变为 className，for 变为 htmlFor。
• 属性值可以是字符串，也可以是 JavaScript 表达式（通过大括号）。

// 静态字符串属性
const element = <div className="my-class" />;

// 动态属性
const className = 'my-class';
const element = <div className={
   className} />;

3. 条件渲染

在 React 中可以通过多种方式进行条件渲染，常见方式包括使用三元表达式、逻辑与 && 或者 if 语句。

3.1 三元表达式