JSX语法

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许在 JavaScript 中嵌入类似于 HTML 的标签语法。JSX 主要用于 React 框架中定义和渲染组件。以下是 JSX 的主要语法规则：

1. 标签语法

• 自闭合标签：类似于 XML，可以使用自闭合标签，如 <input />。
• 嵌套标签：可以像 HTML 一样嵌套标签，如 <div><span>Hello</span></div>。

2. 属性

• 属性名：属性名区分大小写，通常使用驼峰命名法（camelCase），如 className 而不是 class。
• 布尔属性：布尔属性如 disabled 可以直接使用 disabled 或 disabled={true}。
• 字符串和数字属性：可以使用等号赋值，如 value="Hello" 或 value={10}。

3. 表达式

• 插值表达式：在 JSX 中使用 {} 插入 JavaScript 表达式，如 {variable}。
• 表达式求值：可以插入任何 JavaScript 表达式，如 {1 + 2}。

4. 条件渲染

• 三元运算符：使用三元运算符进行条件判断，如 {condition ? <A /> : <B />}。
• 逻辑运算符：可以使用逻辑运算符，如 {condition && <A />}。
• 短路运算符：如果 condition 为真，则渲染 <A />，否则渲染 null。

5. 数组映射

• .map() 方法：使用 .map() 方法来渲染数组中的每个元素，并为每个元素提供一个唯一的 key 属性，如 {array.map(item => <Item key={item.id} value={item.value} />)}。

6. 样式

• 内联样式：使用 style 属性，并提供一个对象来定义样式，如 style={{ color: 'red' }}。

7. 事件处理

• 事件处理器：使用驼峰命名法定义事件处理器，如 onClick。
• 箭头函数：通常使用箭头函数来定义事件处理器，如 onClick={() => console.log('Clicked')}。

8. 注释

• JSX 注释：使用 {/* 注释 */} 形式来添加注释。

9. 类名

• 类名赋值：可以使用字符串拼接或对象解构来动态赋值类名。

10. 片段（Fragment）

• 无 DOM 节点的容器：使用 <React.Fragment> 或 <> 来包装一组元素，而不生成额外的 DOM 节点