React入门 - 07(说一说 JSX 中的语法细节)

news2025/4/28 7:46:30

本章内容

目录

    • 1、js 表达式
    • 2、列表渲染
    • 3、条件渲染
    • 4、className
    • 5、jsx 中的样式处理
    • 6、dangeouslySetInnerHTML
    • 7、htmlFor
    • 8、使用 jsx 的注意事项

上一节内容我们完成了一个简单的TodoList案例。到现在为止我们已经知道怎么在 JSX中使用 “js 表达式”和”列表渲染“了，本节我们继续使用之前的工程项目来编写代码，补充在 React使用 JSX语法的一些细节。

1、js 表达式

  • JSX中使用表达式： { JS 表达式 }
  • 可使用的 js表达式有：

字符串、数值、布尔值、null、undefined、数组、对象
函数: add(1, 2)
js运算: 1+2、'abc'.split('') 等
...
  • 注意：if..else、switch..case等是 js语句，不是表达式，不能出现在 {}中
// App.js 文件中，注释之前的代码，换成以下代码，运行并打开浏览器观察显示结果

import React, { Component } from 'react'
class App extends Component {
 constructor(props) {
  super(props)
  this.obj = {name: 'bob', age: 12}
 }

 // 加法
 add(a, b) {
    return a+b
  }
 // 减法
  minus (a, b) { 
    return a-b
  }
  
 render() {
  return (
   <div className="App">
    <p>字符串： { 'str' }</p>
    <p>数值： { 111 }</p>
    <p>布尔值： { true ? 'true': 'false' }</p>
    <p>null： { null }</p>
    <p>undefined： { undefined }</p>
    <p>数组： { [1, 2, 3, 4] }</p>
    <p>对象： { this.obj.name} - {this.obj.age }</p>
    <p>函数：{ this.add(1, 2)}, {this.minus(10, 1)}</p>
    <p>计算： { 1+3333 }</p>
   </div>
  )
 }
  
}
export default App

在这里插入图片描述

2、列表渲染

  • 在 TodoList案例中，我们已经了解到列表的渲染可以使用 map实现。
  • 渲染过程中需要指定 key, 这是 React内部用于性能优化的，我们后面会详细讲一下.
// App.js 文件中，注释之前的代码，换成以下代码，运行并打开浏览器观察显示结果

import React, { Component } from 'react'
 class App extends Component {
 constructor (props) {
  super(props)
  
  this.userList = [
   { name: 'bob', age: 22 },
   { name: 'liii', age: 18 },
   { name: 'mary', age: 19 },
   { name: 'tom', age: 31 }
   ]

   this.lower20List = this.userList.filter(item => item.age < 20)
 }

 render() {
  return (
   <div className="App">
    <p>展示用户列表数据：</p>
    <ul>
     {
      this.userList.map((item, index) => <li>{item.name} --- {item.age}</li>)
     }
    </ul>
 
 
    <p>展示20岁以下的用户数据</p>
    <ul>
     {
      this.lower20List.map((item, index) => <li key={index}>{item.name} --- {item.age}</li>)
     }
    </ul>
   </div>
  )
 }
  
 }
 export default App

在这里插入图片描述

3、条件渲染

官网这里详细介绍了在 JSX中如何进行条件渲染。具体的方式有：

  • 使用 if表达式语句、switch语句
  • 使用三目运算 （ condition ? a : b）
  • 使用 { condition && a }或者 {condtion || a}
// App.js 文件中，注释之前的代码，换成以下代码，运行并打开浏览器观察显示结果

import React, { Component } from 'react'
function ShowScoreMessage(props){ // 注意组件函数的命名需要使用大驼峰方式
 if (props.score < 60) {
  return (
   <div>
    <p>你的分数是： {props.score}</p>
    <div>不及格！！！</div>
   </div>
  )
 } else {
  return (
   <div>
    <p>你的分数是： {props.score}</p>
    <div>及格！！！</div>
   </div>
  )
 }
}

class App extends Component {
 contructor() {
  this.sex = 'male' // 1.1 定义一个性别的变量
  this.score = 99 // 2.1 定义一个score,根据 score 显示不同的提示组件
   this.isEdit = true // 3.1 定义一个isEidt 变量，用于表示当前是否是编辑状态
 }

 render() {
  return (
   <div>
    {/* 1.2 使用三目运算进行条件渲染 */}
    {this.sex==='male' ? ' 我是一个男孩': '我是一个女孩'}
    { false ? <span>this is span</span> : null}

    {/* 2.2 使用 if 语句进行条件渲染 */}
    <ShowScoreMessage score={this.score}></ShowScoreMessage>

    {/* 3.2 使用 && 运算符显示数据 */}
    { this.isEdit && '现在是编辑状态'}
   </div>
  )
 }
}
export default App

在这里插入图片描述

4、className

  • 在传统的前端编程中，如果想给一个 HTML元素添加类名，只需要给其 class属性进行赋值即可

  • 但是在 React的 JSX语法里，如果想给一个 HTML元素赋值类名，必须使用 className。如果使用 class关键字，React 会认为它是 E6中的类。为了避免歧义，React建议我们将 HTML属性 class改写成 className.

  • 当然了，如果你硬要使用 class来添加类名，确实能生效，但是仔细观察会发现浏览器的控制台会有个错误警告

/* App.css 文件*/
.p1 {
  color: #f00;
}

.p2 {
  color: aqua;
}

// App.js 文件中，注释之前的代码，换成以下代码，运行并打开浏览器观察显示结果

import React, { Component } from 'react'
import './App.css'
 class App extends Component {
  render() {
   return (
   <div>
    {/* 你会发现使用 class 也生效，就是控制台会出现错误警告 */}
    <p class="p1">这是一个class 为 p1 的 p元素</p>

    {/* 建议使用 className 来赋值类名 */}
    <p className="p2">这是一个class 为 p2 的 p元素</p>

     {/* 如果的类名是动态的，仍然可以结合jsx 的表达式+条件渲染 */}
    <p className={false ? 'p1' : ''}>这个p元素的类名是动态的</p>
   </div>
   )
  }
 }
 export default App

在这里插入图片描述

5、jsx 中的样式处理

React中的样式处理，一般有三种方式：

  • 第一种方式是直接行内样式绑定
  • 第二种是将样式提取到一个变量中，再将变量绑定到 style属性上（常用）
  • 第三种是动态控制类名，不同类名里定义不同的样式
/* App.css 文件*/
.p1 {
  color: #f00;
}

.p2 {
  color: aqua;
}

import React, { Component } from 'react'
import './App.css'
 class App extends Component {

  constructor(props) {
    super(props)

    this.styleObj = {
      color: '#f00',
      fontSize: '16px'
    }

    this.isP1 = false
  }

  render() {
    return (
      <div>
       {/* 1、行内样式 */}
       <p style={{color: '#0f0', border: '1px solid #ccc'}}>字体绿色,边框1px</p>

       {/* 2、将样式提取到一个变量中，然后赋值变量到 style 属性上 */}
       <p style={this.styleObj}>字体红色, 字号16px</p>

       {/* 3、使用动态类名来控制样式 */}
       <p className={this.isP1 ? 'p1': 'p2'}>类名为p2的样式</p>
      </div>
    )
  }
}
export default App

在这里插入图片描述

6、dangeouslySetInnerHTML

  • 到现在为止，我们知道在 JSX中如果要渲染一个常规的字符串，可以将字符串赋值一个变量，然后直接使用 {}进行渲染。

  • 那现在假设一下，如果这个字符变量里存储的不是普通的字符串，而是一段 HTML，那要怎么才能正确显示这段 HTML呢？

  • 现在我们来实现一个需求：有个字符变量，内容为 <h1>这是一个 h1 标签</h1>, 希望在页面显示的结果是“一级标题”样式的 ”这是一个 h1 标签“，而不是 <h1> 这是一个 h1 标签</h1>

  • React中提供了 dangeouslySetInnerHTML属性，允许将 HTML插入到组件中。相当于 js的 innerHTML。dangeouslySetInnerHTML在使用时必须传递一个对象，该对象具有一个名为__html的属性，该属性包含您要插入到组件中的HTML字符串

  • 但要注意的是，就如同它的命名一样。它是危险的，由于不会转义，就意味着存在 XSS攻击或者其他安全问题

import React, { Component } from 'react'
 class App extends Component {
  constructor(props) {
    super(props)

    this.str = '<h1>这是一个 h1 标签</h1>'
  }
 render() {
  return (
   <div>
    {/* 直接渲染，你会发现界面显示的是： <h1>这是一个 h1 标签</h1>  */}
    {this.str}

    {/* 在 React 中可以使用 dangerouslySetInnerHTML 来实现直接将 HTML 插入到组件中 */}
    <p dangerouslySetInnerHTML={{__html: this.str}}></p>

   </div>
  )
 }
 }
 export default App

在这里插入图片描述

7、htmlFor

  • 需求：有个可以输入姓名的输入框，要求点击”姓名“时，input框也可以获得焦点
  • 传统的做法是，使用 label元素包裹 ”姓名“，然后其for属性绑定input的id属性，这样就可实现点击"姓名"后input框获得焦点
  • 如果我们直接按照传统方式在 React中写，会发现效果虽然实现了，但是控制台会有个错误警告
  • 在 React如果你要使用 label的 for，那么要将 for改写成 htmlFor
<label for="username">姓名</label>
<input id="username" value="bob" name="username" type="text" />

import React, { Component } from 'react'
 class App extends Component {
 render() {
  return (
   <div>
      {/* 功能实现了，但是控制台会出现一个错误警告  */}
      <label for="username">姓名: </label>
      <input id="username" value="bob" name="username" type="text" />

      {/* 在 React 如果你要使用 label的 for ，那么要将 for 改写成 htmlFor */}
      <label htmlFor="username">姓名: </label>
      <input id="username" value="bob" name="username" type="text" />
   </div>
  )
 }
 }
 export default App

在这里插入图片描述

8、使用 jsx 的注意事项

  • JSX必须有一个根节点，如果没有根节点则使用<></>（幽灵节点）或者 Fragment代替根节点
  • 所有标签必须形成闭合，双标签闭合或者单标签闭合都可
  • JSX语法更贴近js语法，属性名采用驼峰命名法，例：className,htmlFor
  • JSX支持多行（换行），如需换行，可使用（）包裹

到此，本章内容结束！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1390792.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

el-date-picker组件设置时间范围限制

el-date-picker组件设置时间范围限制

需求&#xff1a; 如图所示&#xff0c;下图为新增的一个弹层页面&#xff0c;同时有个需求&#xff0c;日期选择需要限制一个月的时间范围&#xff08;一月默认为30天&#xff09;&#xff1a; 查看官方文档我们需要主要使用到如下表格的一些东西&#xff1a; 参数说明类型可…
阅读更多...
C语言经典算法之堆排序算法

C语言经典算法之堆排序算法

目录 前言 建议 简介 A.建堆&#xff1a; B.排序 一、代码实现 二、时空复杂度 A.时间复杂度 B.空间复杂度 三、稳定性 四、现实中的应用 前言 建议 1.学习算法最重要的是理解算法的每一步&#xff0c;而不是记住算法。 2.建议读者学习算法的时候&#xff0c;自己…
阅读更多...
深度强化学习的变道策略：Harmonious Lane Changing via Deep Reinforcement Learning

深度强化学习的变道策略：Harmonious Lane Changing via Deep Reinforcement Learning

偏理论&#xff0c;假设情况不易发生 摘要 多智能体强化学习的换道策略&#xff0c;不同的智能体在每一轮学习后交换策略&#xff0c;达到零和博弈。 和谐驾驶仅依赖于单个车辆有限的感知结果来平衡整体和个体效率&#xff0c;奖励机制结合个人效率和整体效率的和谐。 Ⅰ. 简…
阅读更多...
浪花 - 搜索标签前后端联调

浪花 - 搜索标签前后端联调

前传&#xff1a;浪花 - 根据标签搜索用户-CSDN博客 目录 一、完善后端搜索标签接口 二、前后端搜索标签接口的对接 1. 使用 Axios 发送请求 2. 解决跨域问题 3. Axios 请求传参序列化 4. 接收后端响应数据 5. 处理后端响应数据格式 6. 搜索结果为空的页面展示 附&am…
阅读更多...
Linux网络文件共享服务1（基于FTP文件传输协议）

Linux网络文件共享服务1（基于FTP文件传输协议）

目录 一、了解FTP 1、FTP的相关概念 2、FTP的两种模式及工作原理 2.1 主动模式 2.2 被动模式 3、vsftpd 软件介绍 3.1 基础操作 4、vsftpd服务常见配置 4.1 修改默认命令端口 4.2 主动模式端口 4.3 被动模式端口 4.4 使用当地时间 4.5 匿名用户登录 4.6 匿名用户上…
阅读更多...
初识XSS漏洞

初识XSS漏洞

目录 一、XSS的原理和分类 二、Xss漏洞分类 1. 反射性xss 简单的演示&#xff1a; 2.基于DOM的XSS 简单的演示&#xff1a; 3.存储型XSS ​编辑简单的演示 4、self xss 三、XSS漏洞的危害 四、XSS漏洞的验证 五、XSS漏洞的黑盒测试 六、XSS漏洞的白盒测试 七、XS…
阅读更多...
135基于matlab的经验小波变换(EWT)的自适应信号处理方法

135基于matlab的经验小波变换(EWT)的自适应信号处理方法

基于matlab的经验小波变换(EWT)的自适应信号处理方法.其核心思想是通过对信号的Fourier谱进行自适应划分,建立合适的小波滤波器组来提取信号不同的成分&#xff0c;EWT1D和EWT2D方法。程序已调通&#xff0c;可直接运行。 135matlab信号处理EWT (xiaohongshu.com)
阅读更多...
VMware虚拟机忘记密码操作方法

VMware虚拟机忘记密码操作方法

下面已openEuler虚拟机为例&#xff1a; 1、点击重启时&#xff0c;一直按esc&#xff08;鼠标点击一下&#xff0c;确保鼠标在你的虚拟机里面&#xff09; 2、一直到进入到如下页面按e键&#xff08;可能会略有不同&#xff09; 3、按e键后跳转到如下页面 4、在该页面输入 in…
阅读更多...
C++ OJ基础

C++ OJ基础

C OJ基础 在学校学习C程序设计基础课程的OJ题目 缺少第二十题 这里写目录标题 C OJ基础习题练习(一)打印图形习题练习(二)数据的输入输出习题练习(三)函数重载习题练习(四)设计矩形类习题练习(五)定义Tree类习题练习(六)完善职工工资类Salary的设计习题练习(七)设计矩形类recta…
阅读更多...
CSS样式学习-基本用法

CSS样式学习-基本用法

html超文本传输标签&#xff0c;属性等权重 outline 标签轮廓 <input type"text"> <textarea cols"30" rows"10"></textarea> outline: none; 表示无轮廓 &#xff08;开发时用的比较多&#xff09; CSS 轮廓&#xff…
阅读更多...
机器学习-协同过滤

机器学习-协同过滤

1、协同过滤要解决的问题 协同过滤算法主要用于推荐系统&#xff0c;推荐系统是信息过载所采用的措施&#xff0c;面对海量的数据信息&#xff0c;从中快速推荐出符合用户特点的物品。一些人的“选择恐惧症”、没有明确需求的人。 解决如何从大量信息中找到自己感兴趣的信息。…
阅读更多...
【Linux】Linux系统编程——ls命令

【Linux】Linux系统编程——ls命令

【Linux】Linux 系统编程——ls 命令 1.命令概述 ls 命令是 Linux 和其他类 Unix 操作系统中最常用的命令之一。ls 命令是英文单词 list 的缩写&#xff0c;正如 list 的意思&#xff0c;ls 命令用于列出文件系统中的文件和目录。使用此命令&#xff0c;用户可以查看目录中的…
阅读更多...
redis之单线程和多线程

redis之单线程和多线程

目录 1、redis的发展史 2、redis为什么选择单线程&#xff1f; 3、主线程和Io线程是怎么协作完成请求处理的&#xff1f; 4、IO多路复用 5、开启redis多线程 1、redis的发展史 Redis4.0之前是用的单线程&#xff0c;4.0以后逐渐支持多线程 Redis4.0之前一直采用单线程的主…
阅读更多...
C++学习笔记——用C++实现树（区别于C）

C++学习笔记——用C++实现树（区别于C）

树是一种非常重要的数据结构&#xff0c;它在计算机科学中的应用非常广泛。在本篇博客中&#xff0c;我们将介绍树的基本概念和C中如何实现树。 目录 一、树的基本概念 2.C中实现树 2.1创建一个树的实例&#xff0c;并向其添加节点 2.2三种遍历方式的实现代码 3.与C语言相…
阅读更多...
以前获得的一枚勋章

以前获得的一枚勋章

以前我上大学期间&#xff0c;每周都去合肥南七里买一份广州出版的《足球报》。
阅读更多...
数据结构排序二叉树(下)

数据结构排序二叉树(下)

哎,调了几天深度学习模型,今天来更新排序二叉树 文章目录 前言 一、排序二叉树的结构定义 二、在排序二叉树添加数据 三、定义创建排序二叉树函数 四、查找一棵二叉排序树中的结点x的所在层数 五、删除二叉排序树中T关键字x的节点 六、查找二叉排序树中的所有小于key的关…
阅读更多...
QT上位机开发（动画效果）

QT上位机开发（动画效果）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 不管是仿真&#xff0c;还是对真实环境的一比一模拟&#xff0c;动画都是非常好的一种呈现方式。目前在qt上面&#xff0c;实现动画主要有两种方法…
阅读更多...
Github项目推荐--MusicFreeDesktop

Github项目推荐--MusicFreeDesktop

项目地址 https://github.com/maotoumao/MusicFreeDesktop 项目简述 这是一个开源的音乐播放器&#xff0c;主要使用typescript编写&#xff0c;页面很漂亮。支持自定义主题和插件化配置音源&#xff0c;是一大亮点。 项目截图
阅读更多...
【论文阅读】Latent Consistency Models (LDMs)、LCM-LoRa

【论文阅读】Latent Consistency Models (LDMs)、LCM-LoRa

文章目录 IntroductionPreliminariesDiffusion ModelsConsistency Models Latent Consistency ModelsConsistency Distillation in the Latent SpaceOne-Stage Guided Distillation by Solving Augmented PF-ODEAccelerating Distillation with Skipping Time StepsLatent Cons…
阅读更多...
Rust-数组

Rust-数组

数组是一个容器&#xff0c;它在一块连续空间内存中&#xff0c;存储了一系列的同样类型的数据。 数组中元素的占用空间大小必须是编译期确定的。 数组本身所容纳的元素个数也必须是编译期确定的&#xff0c;执行阶段不可变。 如果需要使用变长的容器&#xff0c;可以使用标…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023