React中的JSX

JSX（JavaScript XML）是 React 中的一种语法扩展，它使得我们可以在 JavaScript 代码中编写类似 HTML 的结构。JSX 最终会被编译为普通的 JavaScript 函数调用，通常使用 React 的 React.createElement() 方法来创建虚拟 DOM 元素。

JSX 的主要特性

1. 类 HTML 语法：
   • JSX 看起来像 HTML，但它并不是真正的 HTML，它是 JavaScript 中的语法糖。
   • 例如，下面的 JSX：

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

     其实会被编译为：

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

2. 表达式嵌入：
   • 在 JSX 中，你可以嵌入任何有效的 JavaScript 表达式。使用 {} 包裹表达式即可。
   • 例如：

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

     这段代码会动态渲染 Hello, Alice!。
3. 组件嵌套：
   • JSX 不仅可以嵌入普通的 HTML 标签，还可以嵌入自定义的 React 组件。
   • 例如：

     function Welcome(props) {
         return <h1>Hello, {props.name}</h1>;
     }
     const element = <Welcome name="Alice" />;
     

     这段代码会动态渲染 Hello, Alice。
4. 属性传递：
   • 在 JSX 中，你可以像在 HTML 中那样传递属性。例如，传递样式或者 class：
   • 例如：

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

5. JSX 是 JavaScript 表达式：
   • 因为 JSX 最终会被编译为 JavaScript 表达式，所以你可以将 JSX 赋值给变量，作为函数的参数或者从函数返回。
   • 例如：

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

JSX 的好处

• 可读性：JSX 使得在 JavaScript 中直接书写用户界面变得更自然，代码更加直观。
• 与逻辑结合紧密：它允许我们在界面中嵌入 JavaScript 逻辑，使得组件的定义和交互更清晰。

JSX 的注意事项

1. class 变为 className：

   • 因为 class 是 JavaScript 的保留字，所以在 JSX 中使用 className 来代替。

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

2. JSX 元素必须闭合：

   • 单标签元素必须自闭合，如：

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

总结

JSX 是 React 中的语法糖，它让我们可以在 JavaScript 中编写类似 HTML 的代码，从而更直观地构建用户界面。JSX 是 React 的一个关键特性，它最终会被编译为标准的 JavaScript。

友情赞助
大家有空闲，帮忙试用下，国货抖音出品的AI编程代码插件，看看和GitHub Copilot那个好**^-^**
（适用JetBrains全家桶系列、Visual Studio家族IDE工具安装等主流IDE工具，支持100+种编程语言）
帮忙去助力>>