JSX语法

JSX是React框架中用于描述UI的语法糖,它允许开发者在JavaScript中书写类似HTML的代码。JSX通过babel转译后生成虚拟DOM,进而实现DOM的高效更新。文中详细介绍了JSX的基本语法,包括单双标签的使用、插值表达式、注释、数据渲染以及属性绑定规则,特别强调了null、undefined和boolean在JSX中的处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JSX语法

1.jsx的作用

react的作用:监听数据更新,帮助我们去渲染视图

render()函数实现了DOM的渲染的过程,这个过程我们可以分为两个阶段:

  1. 获取虚拟DOM(JSX经过babel转译后的对象就是虚拟DOM)
  2. 将虚拟DOM转化成真实DOM,并插入到HTML文档中

JSX javascript xml (xml 一般指的就是可扩展标记语言)

jsx是react提供的语法糖(syntax sugar),能让我们在JS中去写HTML,在React中它的作用是描述UI,可以把它理解为虚拟DOM

2.jsx的基本语法

  1. JSX只能有一个根标签
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);
// 或使用 Fragment(不添加额外 DOM 节点)
return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);
  1. 不需要使用引号包裹
  2. {/**/} 注释
  3. {this.state.name} 插值表达式
  4. jsx中可以是单标签,也可以是双标签,单标签必须闭合
  5. 驼峰命名(camelCase):HTML 属性名需转换为驼峰形式。
  • class → className
  • for → htmlFor
  • tabindex → tabIndex
  1. 列表渲染
    使用数组的 map() 方法动态生成元素列表,必须为每个元素指定唯一 key 属性。
const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
const userList = (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

jsx 中 null undefined boolean 不能被渲染的,如果需要显示,需要转换字符串
jsx中可以插入表达式,但是不可以插入语句

表达式最终会有返回值

绑定class className

要绑定style 在 {} 传入一个对象

jsx的本质其实就是React.createElement的语法糖


  {/*单行注释*/}
            {/*
            多行注释
            多行注释
            */}
            {/*插值表达式*/}
            <h1>{this.state.name}</h1>

  {/*数据渲染*/}
 
          // null undefined boolean 不能被渲染的,如果需要显示,需要转换字符串
          test: null,
          // 对象不能直接在jsx直接渲染,可以转换成字符串或者是直接调用

 			<h1>{this.state.test+''}</h1>
            <h1>{this.state.message.toString()}</h1>
 {/*三元表达式*/}
            <h1>{this.state.status ? '已登录' : '未登录'}</h1>
            {/*jsx中不能写if语句*/}

{/*绑定属性*/}
            {/*单标签必须要闭合*/}
            <img src={img} alt="" />
            <a href={url}>百度一下,你就知道</a>
            {/*绑定class jsx 不是html class className*/}
            <div className="div1">
              我是div1
            </div>

            {/*要绑定style 在 {} 传入一个对象*/}
            <div style={ {color:'red',fontSize:'20px'} }>我也是div</div>
{/* 或者*/}
const style = { backgroundColor: "blue", padding: "10px" };
<div style={style}>Styled Box</div>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值