1.3JSX 语法

1.3JSX 语法

React 基础：JSX 语法详解

1.3 JSX 语法

JSX (JavaScript XML) 是 React 的核心特性之一，它允许开发者在 JavaScript 代码中编写类似 HTML 的结构，从而更直观地描述用户界面。JSX 并非标准的 JavaScript，它需要在编译时通过 Babel 等工具转换为标准的 JavaScript 代码。

1.3.1 JSX 的基本语法

JSX 的基本语法与 HTML 类似，但也有一些关键的区别：

• 标签: JSX 使用标签来描述 UI 元素，例如 <div>、<p>、<h1> 等。

• 属性: 标签可以拥有属性，用于配置 UI 元素的行为和外观，例如 <img src="image.jpg" alt="Image" />。

• 子元素: 标签可以包含子元素，形成嵌套结构，例如：

  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
  ​

• 表达式: JSX 允许在标签中使用 JavaScript 表达式，用花括号 {} 包裹。这使得可以动态地生成 UI 元素的内容和属性。

• 必须包含一个根元素: JSX 组件必须返回一个单一的根元素。 如果想返回多个元素，可以使用 <React.Fragment> 或者简写 <> </>包裹。

1.3.2 JSX 的代码实践与详解

1.3.2.1 基本的 JSX 示例

import React from 'react';
function MyComponent() {
  const name = 'React';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to the world of JSX.</p>
    </div>
  );
}
export default MyComponent;
​

详解:

• 这个例子展示了如何在 JSX 中使用变量 name。花括号 {} 用于将 JavaScript 表达式嵌入到 JSX 中。

• MyComponent 函数返回一个包含 <h1> 和 <p> 元素的 <div> 元素。

1.3.2.2 JSX 中的属性

import React from 'react';
function ImageComponent() {
  const imageUrl = 'https://via.placeholder.com/150';
  return (
    <img src={imageUrl} alt="Placeholder Image" />
  );
}
export default ImageComponent;
​

详解:

• 这个例子展示了如何使用 src 和 alt 属性来配置 <img> 元素。

• imageUrl 变量的值被用作 src 属性的值。

1.3.2.3 JSX 中的条件渲染

import React from 'react';
function ConditionalComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}
export default ConditionalComponent;
​

详解:

• 这个例子展示了如何使用三元运算符 ? : 在 JSX 中进行条件渲染。

• 如果 isLoggedIn 为 true，则显示 "Welcome back!"，否则显示 "Please log in."。

1.3.2.4 JSX 中的列表渲染

import React from 'react';
function ListComponent() {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
export default ListComponent;
​

详解:

• 这个例子展示了如何使用 map() 方法在 JSX 中渲染列表。

• items.map() 遍历 items 数组，为每个元素创建一个 <li> 元素。

• 重要: 在渲染列表时，每个元素都需要一个唯一的 key 属性，用于 React 识别和优化更新。 通常使用数据的id作为key值。

1.3.2.5 JSX 中的事件处理

import React from 'react';
function ButtonComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  };
  return (
    <button onClick={handleClick}>Click me</button>
  );
}
export default ButtonComponent;
​

详解:

• 这个例子展示了如何在 JSX 中处理事件。

• onClick 属性用于指定点击事件的处理函数 handleClick。

• 当按钮被点击时，handleClick 函数会被调用，显示一个警告框。

1.3.2.6 JSX 中的组件组合

import React from 'react';
function Title({ text }) {
  return <h1>{text}</h1>;
}
function Message({ content }) {
  return <p>{content}</p>;
}
function CombinedComponent() {
  return (
    <div>
      <Title text="Welcome!" />
      <Message content="This is a combined component." />
    </div>
  );
}
export default CombinedComponent;
​

详解:

• 这个例子展示了如何将多个组件组合在一起。

• Title 和 Message 组件分别用于渲染标题和消息。

• CombinedComponent 组件将 Title 和 Message 组件组合在一起，形成一个更复杂的 UI。

1.3.2.7 使用 Fragment 避免额外的 DOM 节点

当需要在组件中返回多个元素时，可以使用 <React.Fragment> 或其简写形式 <> </>，避免引入额外的 DOM 节点。

import React from 'react';
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}
export default MyComponent;
​

详解:

• <> 和 </> 允许在不添加额外 DOM 节点的情况下返回多个元素。

• 这有助于保持 DOM 结构的清晰和简洁。

1.3.3 JSX 的注意事项

• class vs className: 在 JSX 中，HTML 的 class 属性应该写成 className，因为 class 是 JavaScript 的保留字。

• style 属性: style 属性的值应该是一个 JavaScript 对象，而不是字符串。对象的 key 使用驼峰命名法，例如 backgroundColor 而不是 background-color。

  <div style={{ backgroundColor: 'lightblue', fontSize: '16px' }}>
    This is a styled div.
  </div>
  ​

• 注释: 在 JSX 中，可以使用 /* */ 或 // 进行注释，但必须将它们放在花括号 {} 中。

  <div>
    {/* This is a comment */}
    <h1>Hello</h1>
    {// This is another comment}
    <p>World</p>
  </div>
  ​

• HTML 转义: JSX 会自动转义嵌入到模板中的任何值，以防止 XSS 攻击。 如果需要渲染原始 HTML，可以使用 dangerouslySetInnerHTML 属性，但要谨慎使用，因为它可能导致安全问题。

  function MyComponent({ htmlContent }) {
    return (
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    );
  }
  ​

  警告: 谨慎使用 dangerouslySetInnerHTML，确保 htmlContent 的来源可信，以防止 XSS 攻击。

1.3.4 JSX 与 JavaScript 的转换

JSX 代码在浏览器中无法直接运行，需要通过 Babel 等工具将其转换为标准的 JavaScript 代码。 例如，以下 JSX 代码：

<h1>Hello, JSX!</h1>
​

会被转换为类似于以下的 JavaScript 代码：

React.createElement("h1", null, "Hello, JSX!");
​

React.createElement 函数是 React 用于创建虚拟 DOM 元素的 API。

1.3.5 使用 Mermaid 图表可视化 JSX 结构

可以使用 Mermaid 图表来可视化 JSX 组件的结构。 例如，以下 Mermaid 代码描述了一个简单的组件结构：

这段代码会生成一个图表，显示 App Component 包含 Header Component 和 Main Content Component，而 Main Content Component 又包含 Article Component 和 Sidebar Component。

图表解释:

• A[App Component] 定义了一个名为 "App Component" 的节点。

• --> 表示父子关系。

• B(Header Component) 定义了一个名为 "Header Component" 的节点，并使用圆括号表示。

1.3.6 总结

JSX 是 React 中一个强大的工具，它允许开发者以声明式的方式描述 UI 界面。 掌握 JSX 的语法和特性对于编写高效、可维护的 React 代码至关重要。 通过本文的学习，你应该能够理解 JSX 的基本概念、语法规则和最佳实践，并能够将其应用到实际的 React 项目中。 记住，实践是最好的老师，多编写 JSX 代码，你将逐渐掌握它的精髓。