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

本章内容

目录

    • 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支持多行（换行），如需换行，可使用（）包裹

到此，本章内容结束！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

跟随chatgpt学习如何使用GLSL进行简单的图形渲染

跟随chatgpt学习如何使用GLSL进行简单的图形渲染

1. 准备一个HTML文件&#xff1a;创建一个新的HTML文件&#xff0c;将 HTML 文件命名为 index.html&#xff0c;并添加一个用于显示图形的<canvas>元素。 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>Simple We…
阅读更多...
基于springboot的美食分享平台(程序+数据库+文档)

基于springboot的美食分享平台(程序+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、研究背景 1.1 课题背景 二…
阅读更多...
合适的索引顺序

合适的索引顺序

一.前言 正确的顺序依赖于使用索引的查询,并且同时需要考虑如何更好地满足排序和分组的需要。因为哈希或者其他类型的索引并不会像 B-Tree索引一样顺序存储数据,所以这里只针对B-Tree展开讨论。 二.合适的索引顺序 1. 概念 对于如何选择索引顺序有一个经验法则: 将选择性最…
阅读更多...
【驱动】TI AM437x(内核调试-06)：网卡（PHY和MAC）、七层OSI

【驱动】TI AM437x(内核调试-06)：网卡（PHY和MAC）、七层OSI

1、网络基础知识 1.1 七层OSI 第一层：物理层。 1）需求： 两个电脑之间如何进行通信？ 具体就是一台发比特流，另一台能够收到。于是就有了物理层：主要是定义设备标准，如网线的额接口类型、管线的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流，就是从1/0…
阅读更多...
C++设计模式（李建忠）笔记1

C++设计模式（李建忠）笔记1

C设计模式&#xff08;李建忠&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 参考链接 Youtube: C设计模式 Gtihub源码与PPT&#xff1a;https://github.com/ZachL1/Bilibili-plus 豆瓣: 设计模式–可复用面向对象软件的基础 文章目录 C设计模…
阅读更多...
WSL deepin的开荒之路

WSL deepin的开荒之路

WSL deepin的开荒之路 问题1:sudo apt-get install ***报错无法定位包&#xff08;Unable to locate package&#xff09;问题2&#xff1a;如果在子系统中访问windows下的其他分区 windows11安装deepin直通车https://editor.csdn.net/md/?articleId135648217 问题1:sudo apt…
阅读更多...
企业网盘：实现文件共享与协同办公的利器

企业网盘：实现文件共享与协同办公的利器

企业网盘无疑是当下热门的信息管理工具&#xff0c;集存储、管理和协作功能于一体&#xff0c;以其高性价比、便捷易用、高效安全等特质&#xff0c;捕获各行各业的青睐。一跃成为2023年度大热的企业工具之一。 那么企业网盘究竟有何种魅力呢&#xff1f;换而言之&#xff0c;对…
阅读更多...
解析Transformer模型

解析Transformer模型

原文地址&#xff1a;https://zhanghan.xyz/posts/17281/ 进入Transformer RNN很难处理冗长的文本序列&#xff0c;且很容易受到所谓梯度消失/爆炸的问题。RNN是按顺序处理单词的&#xff0c;所以很难并行化。 用一句话总结Transformer&#xff1a;当一个扩展性极佳的模型和一…
阅读更多...
STM32——ADC知识总结及多通道采样实验

STM32——ADC知识总结及多通道采样实验

1.ADC概念 ADC&#xff0c;全称&#xff1a;Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 2 STM32各系列ADC的主要特性 3.F4框图 4.转换序列与转换时间 A/D转换被组织为两组&#xff1a;规则组&#xff08;常规转换组&#xff09;和注入组&#xff08;注入…
阅读更多...
JNI笔记

JNI笔记

JNI笔记 背景Demo代码JNI.javaMainActivity.javaAndroid.mkApplication.mkcom_stone_javacallc_JNI.hjavacallc.cbuild.gradle 背景 Demo代码 代码结构 JNI.java package com.stone.javacallc;/*** Created by stoneWang* Created on 2024/1/16* java调用C*/ public class …
阅读更多...
mysql常见的需求，对于关键字的使用

mysql常见的需求，对于关键字的使用

如何使用MySQL将列数据转化为逗号分隔的形式。我们可以使用内置函数GROUP_CONCAT()来实现这个功能 如何使用MySQL将列数据转化为逗号分隔的形式。我们可以使用内置函数GROUP_CONCAT()来实现这个功能&#xff0c;也可以根据实际需求自定义一个函数。这种技术在一些需要对数据进…
阅读更多...
架构师之超时未支付的订单进行取消操作的几种解决方案

架构师之超时未支付的订单进行取消操作的几种解决方案

今天给大家上一盘硬菜&#xff0c;并且是支付中非常重要的一个技术解决方案&#xff0c;有这块业务的同学注意自己尝试一把哈&#xff01; 一、需求如下&#xff1a; 生成订单30分钟未支付&#xff0c;自动取消 生成订单60秒后,给用户发短信 对上述的需求&#xff0c;我们给…
阅读更多...
leetcode—矩阵

leetcode—矩阵

1 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 方法一&#xf…
阅读更多...
知识库建设教程来啦，赶紧收藏起来

知识库建设教程来啦，赶紧收藏起来

播种知识&#xff0c;收获效率。知识库&#xff0c;这个企业内部服务的“大百科”&#xff0c;可能是你下一步需要建立的重要工具哦&#xff01;今天&#xff0c;就让我们一起来看一下如何进行知识库的建设和维护。 首先&#xff0c;让我们理解一下知识库的定义。知识库就像是一…
阅读更多...
探索Python数据结构与算法：解锁编程的无限可能

探索Python数据结构与算法：解锁编程的无限可能

文章目录 一、引言1.1 数据结构与算法对于编程的重要性1.2 Python作为实现数据结构与算法的强大工具 二、列表和元组2.1 列表&#xff1a;创建列表、索引、切片和常用操作2.2 元组&#xff1a;不可变序列的特性和使用场景 三、字符串操作和正则表达式3.1 字符串的常见操作和方法…
阅读更多...
第36期 | GPTSecurity周报

第36期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…
阅读更多...
c语言-库函数strstr()、strtok()、strerror()介绍

c语言-库函数strstr()、strtok()、strerror()介绍

文章目录 前言一、库函数strstr()1.1 strstr()介绍1.2 strstr()模拟实现 二、库函数strtok()2.1 strtok()介绍 三、库函数strerror()3.1 strerror()介绍 总结 前言 本篇文章介绍c语言库函数strstr()、strtok()、strerror()的使用。 一、库函数strstr() 1.1 strstr()介绍 str…
阅读更多...
Linux/Networked

Linux/Networked

Enumeration nmap 网站更新之后有了一个引导模式&#xff0c;更利于学习了&#xff0c;之前看ippsec的视频&#xff0c;要不总是没有思路&#xff0c;现在出现的问题多了提示也更多了&#xff0c;还没有使用&#xff0c;一会用用再说 首先&#xff0c;第一个问题是“目标上正…
阅读更多...
RocketMQ源码阅读-Producer消息发送

RocketMQ源码阅读-Producer消息发送

RocketMQ源码阅读-Producer消息发送 1. 从单元测试入手2. 启动过程3. 同步消息发送过程4. 异步消息发送过程5. 小结 Producer是消息的生产者。 Producer和Consummer对Rocket来说都是Client&#xff0c;Server是Broker。 客户端在源码中是一个单独的Model&#xff0c;目录为rock…
阅读更多...
WordPress后台仪表盘自定义添加删除概览项目插件Glance That

WordPress后台仪表盘自定义添加删除概览项目插件Glance That

成功搭建WordPress站点&#xff0c;登录后台后可以在“仪表盘 – 概览”中看到包括多少篇文章、多少个页面、多少条评论和当前WordPress版本号及所使用的主题。具体如下图所示&#xff1a; 但是如果我们的WordPress站点还有自定义文章类型&#xff0c;也想在概览中显示出来应该…
阅读更多...
最新文章

Copyright @ 2022~2023