当前位置: 首页 > news >正文

React 条件渲染

React 条件渲染

React 条件渲染是一种在 React 应用程序中根据不同的条件显示不同组件或内容的技巧。它是 React 响应用户输入、状态变化或数据变化的核心机制之一。本文将深入探讨 React 条件渲染的概念、用法和最佳实践。

目录

  1. 条件渲染的基本概念
  2. 使用 JavaScript 运算符进行条件渲染
  3. 使用逻辑与 (&&) 进行条件渲染
  4. 条件渲染的高级用法
  5. 条件渲染的性能优化
  6. 最佳实践

1. 条件渲染的基本概念

在 React 中,条件渲染允许我们根据应用程序的状态来显示或隐藏组件。这通常是通过在 JSX 中使用 JavaScript 的条件运算符来实现的。例如,我们可以根据用户是否登录来显示不同的导航栏。

function Navbar() {const isAuthenticated = true; // 假设这是从状态或上下文中获取的return (<div><nav><ul><li><a href="/">Home</a></li>{isAuthenticated && <li><a href="/profile">Profile</a></li>}</ul></nav></div>);
}

在这个例子中,如果 isAuthenticatedtrue,那么“Profile”链接将显示在导航栏中;否则,它将不会显示。

2. 使用 JavaScript 运算符进行条件渲染

在 React 中,我们可以使用标准的 JavaScript 运算符,如 ifelse条件 ? 表达式1 : 表达式2,来进行条件渲染。

function Greeting() {const isMorning = true;if (isMorning) {return <h1>Good morning!</h1>;} else {return <h1>Good evening!</h1>;}
}

或者使用三元运算符:

function Greeting() {const isMorning = true;return (<div>{isMorning ? <h1>Good morning!</h1> : <h1>Good evening!</h1>}</div>);
}

这两种方法都可以根据条件渲染不同的内容。

3. 使用逻辑与 (&&) 进行条件渲染

在 React 中,使用逻辑与 (&&) 运算符是一种常见的条件渲染模式。这种方法简洁且易于理解。

function ConditionalComponent() {const shouldRender = true;return (<div>{shouldRender && <p>This will render if shouldRender is true.</p>}</div>);
}

在这个例子中,如果 shouldRendertrue,那么 <p> 元素将渲染;否则,它将被跳过。

4. 条件渲染的高级用法

除了基本的条件渲染,React 还提供了一些高级用法,如使用渲染属性和高阶组件。

渲染属性

渲染属性允许我们将一个组件的渲染逻辑传递给另一个组件。

function MouseTracker() {const [position, setPosition] = useState({ x: 0, y: 0 });return (<div style={{ height: '100vh' }} onMouseMove={event => setPosition({ x: event.clientX, y: event.clientY })}><h1>Move the mouse around!</h1><p>The mouse position is ({position.x}, {position.y})</p></div>);
}function App() {return (<div><MouseTracker>{({ x, y }) => <h2>Mouse position: ({x}, {y})</h2>}</MouseTracker></div>);
}

在这个例子中,MouseTracker 组件负责捕获鼠标位置,而 App 组件则决定如何渲染这些数据。

高阶组件 (HOC)

高阶组件是参数为组件,返回值为新组件的函数。

function withMouseTracking(WrappedComponent) {return class extends React.Component {constructor(props) {super(props);this.state = { x: 0, y: 0 };}handleMouseMove = event => {this.setState({x: event.clientX,y: event.clientY});};render() {return (<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}><WrappedComponent {...this.props} mousePosition={this.state} /></div>);}};
}function MousePositionComponent({ mousePosition }) {return (<p>The mouse position is ({mousePosition.x}, {mousePosition.y})</p>);
}const MousePositionWithTracking = withMouseTracking(MousePositionComponent);

在这个

相关文章:

React 条件渲染

React 条件渲染 React 条件渲染是一种在 React 应用程序中根据不同的条件显示不同组件或内容的技巧。它是 React 响应用户输入、状态变化或数据变化的核心机制之一。本文将深入探讨 React 条件渲染的概念、用法和最佳实践。 目录 条件渲染的基本概念使用 JavaScript 运算符进…...

Hadoop生态圈框架部署(九)- Hive部署

文章目录 前言一、Hive部署&#xff08;手动部署&#xff09;下载Hive1. 上传安装包2. 解压Hive安装包2.1 解压2.2 重命名2.3 解决guava冲突 3. 配置Hive3.1 配置Hive环境变量3.2 修改 hive-site.xml 配置文件3.3 配置MySQL驱动包3.3.1 下在MySQL驱动包3.3.2 上传MySQL驱动包3.…...

c语言的qsort函数理解与使用

介绍&#xff1a;qsort 函数是 C 标准库中用于排序的快速排序算法函数。它的用法非常灵活&#xff0c;可以对任意类型的元素进行排序&#xff0c;只要提供了比较函数即可。 qsort 函数原型及参数解释&#xff1a; void qsort ( void* base, //指向要排序的数组的首元素…...

Java 语言的起源发展与基本概念(JDK,JRE,JVM)

Java语言的起源 源起 Java语言最初是由Sun Microsystems公司&#xff08;该公司于2009年被Oracle公司收购&#xff09;开发的一种编程语言。其创造者是詹姆斯高斯林&#xff08;James Gosling&#xff09;&#xff0c;他是一位加拿大计算机科学家。其前身名为Oak&#xff08;橡…...

03_变量

变量 var num 10; 变量的重新赋值 var num10; num 20; 变量提升 JavaScript 引擎的工作方式是&#xff0c;先解析代码&#xff0c;获取所有被声明的变量&#xff0c;然后再一行一行地运行。这造成的结果&#xff0c;就是所有的变量的声明语句&#xff0c;都会被提升到代码的…...

[论文阅读-综述]Supervised Speech Separation Based on Deep Learning: An Overview

基于深度学习的监督语音分离&#xff1a;综述 出版&#xff1a;IEEE 核心&#xff1a;使用语音分离将目标语音信号与噪声混合分离的计算 本文用于对该文章的学习&#xff0c;主要是对内容的理解翻译与笔记 1. 语音分离介绍 语音分离的目标&#xff1a;将目标语音与背景干扰分…...

群控系统服务端开发模式-应用开发-邮箱配置功能开发

邮箱配置主要是将管理员数据做归属。具体见下图&#xff1a; 一、创建表 1、语句 CREATE TABLE cluster_control.nc_param_mail (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 编号,title varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT…...

【机器学习】——卷积与循环的交响曲:神经网络模型在现代科技中的协奏

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…...

android studio引用so库

在工程中编译好的so库文件将在原始编译工程对应目录下&#xff1a;build/intermediates/cxx/Debug/xxxxxx/obj/ 其目录结构如上所示&#xff0c;包含生成的四个版本&#xff0c;每个文件夹下均包含c/c源码编译成的Android版本的libnavi.so库和提供应用接口的libnavi-lib.so库。…...

2024年信号处理与神经网络应用(SPNNA 2024)

会议官网&#xff1a;www.spnna.org 会议时间&#xff1a;2024年12月13-15日 会议地点&#xff1a;中国武汉...

wxWidgets-ImageView

wxWidgets实现图片浏览、放大缩小、另存为新的图片格式等 #include "wx/wxprec.h"#ifndef WX_PRECOMP#include "wx/wx.h" #endif#include "wx/filename.h" #include "wx/zstream.h"#include "imageviewctrl.h"class MyFrame…...

第1章-JVM和Java体系架构

虚拟机 虚拟机概念 所谓虚拟机&#xff08;Virtual Machine&#xff09;&#xff0c;就是一台虚拟的计算机。它是一款软件&#xff0c;用来执行一系列虚拟计算机指令。大体上&#xff0c;虚拟机可以分为系统虚拟机和程序虚拟机。 大名鼎鼎的Virtual Box&#xff0c;VMware就属…...

windows 服务器角色

windows 服务器角色 Active Directory Rights Management Services Active Directory RightsManagement Services (AD RS)帮助保护信息&#xff0c;防止未授权使用。AD RMS 将建立用户标识&#xff0c;并为授权用户提供受保护信息的许可证。 ServicesActive Directory 联合身…...

[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式

T. 已测试目录 主机类型主机版本Docker镜像版本结果WSL2Ubuntu22.04Ubuntu20.04PASSWSL2Ubuntu22.04Ubuntu18.04PASS R. 软硬件要求&#xff1a; 编译硬件需求&#xff1a;做多系统测试&#xff0c;磁盘500GB起步(固态)&#xff08;机械会卡死&#xff09;&#xff0c;内存3…...

C#中判断两个 List<T> 的内容是否相等

ET实现游戏中邮件系统逻辑思路&#xff08;服务端&#xff09;_游戏邮件系统设计-CSDN博客 场景&#xff1a;今天遇到一个BUG&#xff0c;在服务器重启的时候&#xff08;体验服&#xff09;&#xff0c;玩家之前接收的邮件又重新接收了一次&#xff0c;但是两封邮件的ID是不同…...

Linux环境下配置neo4j图数据库

1.下载安装包 openjdk-11.0.1_linux-x64_bin.tar.gz neo4j-community-4.2.19-unix.tar.gz 2.之前配置好的配置文件 neo4j.conf 3.安装 3.1-jdk11的安装&#xff08;jdk1.8不够用&#xff09; 解压缩 tar -zxvf openjdk-11.0.1_linux-x64_bin.tar.gz修改系统环境变量 打开pro…...

Windows 11 搭建 Docker 桌面版详细教程

在当今的软件开发与部署领域&#xff0c;Docker 已成为一项极为重要的容器化技术。它能够让开发者轻松地打包应用及其依赖项&#xff0c;实现跨环境的一致性运行&#xff0c;大大提高了开发效率与部署的便捷性。本教程将详细介绍在 Windows 11 操作系统上搭建 Docker 桌面版的具…...

Pytest-Bdd-Playwright 系列教程(13):钩子(hooks)

Pytest-Bdd-Playwright 系列教程&#xff08;13&#xff09;&#xff1a;钩子&#xff08;hooks&#xff09; 前言一、什么是钩子&#xff1f;二、Pytest-Bdd 提供的钩子一览三、钩子用法详解1. pytest_bdd_before_scenario2. pytest_bdd_after_scenario3. pytest_bdd_before_s…...

dns 服务器简单介绍

dns 服务器分类&#xff1a; 根域名服务器顶级域名服务器权威域名服务器本地域名服务器 dns 的查询过程 国内优秀公共域名 腾讯&#xff1a;DNSPod-免费智能DNS解析服务商-电信_网通_教育网,智能DNS-烟台帝思普网络科技有限公司 119.29.29.29 和 182.254.118.118 阿里&#xf…...

Neo4j图形数据库-Cypher中常用指令

一、创建与修改 1.1 create 创建图数据库中的节点、关系等元素&#xff1a; CREATE (:Person {name: "Alice", age: 30}) CREATE (p1:Person {name: "Bob"})-[r:KNOWS]->(p2:Person {name: "Charlie"})批量创建元素 CREATE (n1:Node),(n2…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...