首页 > 其他分享 >JSX 语法详解

JSX 语法详解

时间:2024-09-05 17:55:38浏览次数:9  
标签:function return 示例 语法 详解 const JSX 属性

在现代前端开发中,React 框架因其高效和灵活的特点而备受青睐。作为 React 的核心组成部分之一,JSX(JavaScript XML)是一种语法扩展,它允许我们在 JavaScript 中书写类似 HTML 的标签。本文将从基础入手,逐步深入地介绍 JSX 的基本概念、常见问题及易错点,并通过具体的代码示例来帮助大家更好地理解和应用。 image.png

1. JSX 的基本概念

什么是 JSX?

JSX 是一种类似于 HTML 的语法扩展,它允许我们在 JavaScript 中书写类似 HTML 的标签。JSX 可以让代码更加直观和易于理解,特别是在处理复杂的 UI 结构时。

JSX 的基本语法

基本元素

function Greeting() {
    return Hello, world!;
}

属性

function Welcome(props) {
    return Hello, {props.name}!;
}

<Welcome name="Alice" />;

子元素

function Card() {
    return (
        <div>
            Title
            <p>Content</p>
        </div>
    );
}

表达式

function Square({ value }) {
    return <button>{value}</button>;
}

<Square value={42} />;

JSX 的编译过程

JSX 代码在编译时会被转换成普通的 JavaScript 代码。例如,上面的 Hello, world! 会被转换成 React.createElement('h1', null, 'Hello, world!')

2. JSX 的高级用法

条件渲染

三元运算符

function NumberDisplay({ value }) {
    return value > 0 ? <p>Positive</p> : <p>Negative or Zero</p>;
}

<NumberDisplay value={-5} />;
<NumberDisplay value={0} />;
<NumberDisplay value={5} />;

短路运算符

function UserGreeting({ isLoggedIn }) {
    return isLoggedIn ? <p>Welcome back!</p> : null;
}

<UserGreeting isLoggedIn={true} />;
<UserGreeting isLoggedIn={false} />;

列表渲染

使用 map 函数

function NumberList({ numbers }) {
    const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
    return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
<NumberList numbers={numbers} />;

使用 key 属性

function TodoList({ todos }) {
    const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
    return <ul>{todoItems}</ul>;
}

const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a web app' },
    { id: 3, text: 'Deploy the app' }
];

<TodoList todos={todos} />;

JSX 中的样式

内联样式

function Box({ color }) {
    const style = {
        backgroundColor: color,
        padding: '10px',
        margin: '10px',
        border: '1px solid black'
    };
    return <div style={style}>Box</div>;
}

<Box color="red" />;
<Box color="blue" />;

CSS 类名

function Button({ className }) {
    return <button className={className}>Button</button>;
}

<Button className="primary" />;
<Button className="secondary" />;

3. 常见问题与易错点

常见问题

  • 忘记使用闭合标签:在 JSX 中,所有标签都需要闭合。
  • 忘记使用 key 属性:在渲染列表时,忘记给每个元素加上唯一的 key 属性。
  • 属性名称大小写:在 JSX 中,属性名称区分大小写。

如何避免

  • 闭合标签:确保所有标签都正确闭合。
  • 使用 key 属性:在渲染列表时,始终给每个元素加上唯一的 key 属性。
  • 属性名称大小写:使用标准的 JSX 属性名称,如 className 而不是 class

示例代码

忘记闭合标签

// 错误示例
function ErrorCard() {
    return <div><p>Content</p>;
}

// 正确示例
function CorrectCard() {
    return <div><p>Content</p></div>;
}

忘记使用 key 属性

// 错误示例
function TodoList({ todos }) {
    const todoItems = todos.map((todo) => <li>{todo.text}</li>);
    return <ul>{todoItems}</ul>;
}

// 正确示例
function TodoList({ todos }) {
    const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
    return <ul>{todoItems}</ul>;
}

属性名称大小写

// 错误示例
function Button({ class }) {
    return <button class={class}>Button</button>;
}

// 正确示例
function Button({ className }) {
    return <button className={className}>Button</button>;
}

4. 总结

通过本文的学习,相信你对 JSX 有了更清晰的认识。JSX 是 React 框架的核心组成部分之一,它允许我们在 JavaScript 中书写类似 HTML 的标签。理解并熟练运用 JSX,对于编写高质量的 React 应用程序至关重要。希望本文能为你今后的学习之路打下坚实的基础!

标签:function,return,示例,语法,详解,const,JSX,属性
From: https://blog.51cto.com/u_16701217/11929562

相关文章

  • MySQL 数据类型详解
    MySQL是一种广泛使用的关系型数据库管理系统,它支持多种数据类型以满足各种应用场景的需求。本文将详细介绍MySQL支持的数据类型、它们的使用场景以及实现原理,并通过图示帮助读者更直观地理解。目录简介数值类型整型浮点型定点型日期和时间类型字符串类型字符串二进制字......
  • CSS的基本语法
    一.CSS的基本语法1.1CSS的基本语法结构h1{ font-size:12px; color:#F00;}h1选择器font-size:12px声明font-size属性CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;”都要写上1.2style标签<styletype="text/css"......
  • Prometheus语法
    https://prometheus.io/docs/prometheus/latest/querying/basics/sumby(countryCode,appName,url)(increase(app_invoke_cost_time_seconds{env="prod",countryCode="$countryCode",appName="$appName",url=~"($url)"}[1m]......
  • Markdown语法整理
      在日常的笔记整理过程中,经常会使用Markdown编辑器进行内容的整理和编写,在Markdown编辑器中有一些专有的语法,使用这些的语法对笔记进行整理后,可以使其更加整洁和易读。一、缩进格式调整&emsp; ————表示一个全角空格,一个汉字字符的长度;&emsp;&emsp; ————表......
  • 软件测试学习笔记丨Linux-Bash编程语法
    本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32091一、Bash编程基础1.1变量1.1.1语法Variable_name=value1.1.2变量定义的规则变量名区分大小写,a和A为两个不同的变量;变量名可以使用大小写字母混编的形式进行编写;变量名与值之间的=两侧都不能有空格;在读取或打印变量......
  • 若依框架登录鉴权详解
    若依框架(Ruoyi)后端的登录权限身份认证流程是一个复杂但高效的过程,它确保了系统的安全性和数据的保护。以下是一个典型的若依框架后端登录权限身份认证流程,基于多个来源的信息进行归纳和整理:1.发起请求获取认证凭证(token)现象:用户未登录或者token过期,刷新页面将重定向至登录页......
  • 网站提示“Parse error:解析错误,通常是语法错误”错误如何解决
    当您遇到“Parseerror:解析错误,通常是语法错误”时,这意味着您的代码中存在语法上的问题,导致解析器无法正确解析代码。这类错误通常出现在PHP、JavaScript等编程语言中。以下是一些解决这类问题的方法:PHP中的ParseError1.检查错误信息定位错误:错误信息通常会指出发生错误的......
  • 互联网算法备案必要性+攻略全流程详解【附件+流程】
    一、算法备案的重要性算法备案是指相关企业或组织向有关部门提交其使用的算法的相关信息,以接受监管和审查。这一举措有助于确保算法的公正性、透明性和合法性,保护用户的权益,促进数字经济的健康发展。算法备案必要性强制性例如,在推荐系统中,如果算法存在偏见或歧视,可能会导致......
  • ANSYS实用功能详解(一)——弱弹簧
    我们在做静力学分析时,有时会遇到这种情况:一个结构,在对其进行受力分析时,它是平衡的,但在ANSYS中计算的时候,软件会报错,求不出结果来。比如下图所示一根杆,两端受到等值反向共线的力F作用,根据二力平衡公理,这根杆是平衡的。下面,我们使用ANSYS计算一下这个结构。Step1:建立模型。在......
  • Java基础语法
    Java基础语法1.注释​注释是对代码的解释和说明文字。Java中的注释分为三种:单行注释://这是单行注释文字多行注释:/*这是多行注释文字这是多行注释文字这是多行注释文字*/注意:多行注释不能嵌套使用。文档注释(暂时用不到):/**这是多行注释文字这是多行注释......