JSX代码

JSX代码

什么是 JSX？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于在 React 中描述用户界面。它让代码看起来像 HTML，但本质上是 JavaScript。

JSX 的基本特点

1. XML 语法： JSX 允许在 JavaScript 文件中写类似 HTML 的结构化标签。
2. 可组合： JSX 标签可以像函数一样被调用和嵌套。
3. JavaScript 表达式： 在 {} 中可以插入任何有效的 JavaScript 表达式。
4. 转换： 浏览器不能直接理解 JSX，需要通过工具（如 Babel）将其转换为标准 JavaScript。

---

JSX 基本语法规则

1. 包含 HTML 标签

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

2. 嵌套 JavaScript 表达式

在 JSX 中可以使用 {} 来插入变量或函数返回值：

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

3. 使用组件

JSX 中可以嵌套 React 组件：

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

const element = <Welcome name="John" />;

4. 添加属性

使用 camelCase 的方式定义 HTML 属性：

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

5. 使用子元素

JSX 标签可以有子元素：

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

6. 必须闭合标签

所有标签必须闭合，即使是单标签（如 <img> 或 <input>）：

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

7. JavaScript 表达式的限制

JSX 中不能使用 if-else 语句，但可以使用三元运算符或逻辑运算符：

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

8. 样式和类名

• 样式：使用 style 属性并传递一个对象：

const element = <div style={{ color: 'blue', fontSize: '20px' }}>Styled Text</div>;

• 类名：使用 className 而不是 class：

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

---

JSX 的工作原理

JSX 是语法糖，最终会被转换为 React.createElement 调用。例如：

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

会被编译为：

const element = React.createElement('h1', null, 'Hello, world!');

---

注意事项

1. JSX 中的注释：

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

2. JavaScript 表达式不能返回对象： JSX 表达式只能返回一个值（可以是 string、number、array、null 等），但不能返回普通对象。

3. 保留字问题： 避免使用 JavaScript 的保留字（如 class、for），需要用 className 和 htmlFor 替代。

JSX 提高了开发效率，使 UI 结构和逻辑更加直观，但其本质依然是 JavaScript，因此可以灵活使用各种 JavaScript 功能与其结合。

选择解析器格式

docusaurus.config.js

  // markdown插件支持
  markdown: {
	// 可以设置为 md | mdx | detect
    format: 'detect',
  },