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

在 React 中，创建和嵌套组件、添加标签和样式、显示数据、渲染条件和列表、对事件做出响应并更新界面以及在组件间共享数据是常见的任务

news 来源：原创 2025/6/22 0:59:17

文章目录

- - 1. 创建和嵌套组件
  - - 创建组件
    - 嵌套组件
  - 2. 添加标签和样式
  - - 添加标签
    - 添加样式
  - 3. 显示数据
  - - 显示静态数据
    - 显示动态数据
  - 4. 渲染条件和列表
  - - 条件渲染
    - 列表渲染
  - 5. 对事件做出响应并更新界面
  - - 处理事件
  - 6. 在组件间共享数据
  - - 使用 Context API

react
如何创建和嵌套组件
如何添加标签和样式
如何显示数据
如何渲染条件和列表
如何对事件做出响应并更新界面
如何在组件间共享数据

在 React 中，创建和嵌套组件、添加标签和样式、显示数据、渲染条件和列表、对事件做出响应并更新界面以及在组件间共享数据是常见的任务。以下是每个步骤的详细说明：

1. 创建和嵌套组件

创建组件

你可以使用函数组件或类组件来创建组件。函数组件更常用，因为它们更简洁。

// Function component
function MyComponent() {return <div>Hello, World!</div>;
}// Class component
class MyClassComponent extends React.Component {render() {return <div>Hello, World!</div>;}
}

嵌套组件

你可以通过在 JSX 中嵌套组件来实现这一点。

function ParentComponent() {return (<div><h1>Parent Component</h1><ChildComponent /></div>);
}function ChildComponent() {return <div>I am a child component</div>;
}

2. 添加标签和样式

添加标签

直接在 JSX 中使用 HTML 标签。

function MyComponent() {return (<div><h1>Title</h1><p>This is a paragraph.</p></div>);
}

添加样式

可以使用内联样式或者 CSS 类。

// Inline styles
function MyComponent() {const style = { color: 'red', fontSize: '20px' };return <div style={style}>Styled Text</div>;
}// CSS classes
import './MyComponent.css'; // Assuming you have a CSS file named MyComponent.cssfunction MyComponent() {return <div className="my-component">Styled Text</div>;
}

3. 显示数据

显示静态数据

直接在 JSX 中插入数据。

const name = "John";
function MyComponent() {return <div>Hello, {name}!</div>;
}

显示动态数据

通过状态管理（如 useState）来显示动态数据。

import React, { useState } from 'react';function MyComponent() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

4. 渲染条件和列表

条件渲染

使用三元运算符或逻辑运算符。

function MyComponent({ isLoggedIn }) {return (<div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>);
}

列表渲染

使用 map 方法来渲染数组。

const items = ['Apple', 'Banana', 'Cherry'];function MyComponent() {return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}

5. 对事件做出响应并更新界面

处理事件

使用事件处理器函数。

function MyComponent() {const handleClick = () => {alert('Button clicked!');};return <button onClick={handleClick}>Click me</button>;
}

6. 在组件间共享数据

使用 Context API

Context API 允许你在组件树中传递数据而不必手动地通过每一个层级传递 props。

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function MyProvider({ children }) {const [state, setState] = useState('Hello, World!');return (<MyContext.Provider value={{ state, setState }}>{children}</MyContext.Provider>);
}function ChildComponent() {const { state, setState } = useContext(MyContext);return (<div><p>{state}</p><button onClick={() => setState('Updated State')}>Update State</button></div>);
}function App() {return (<MyProvider><ChildComponent /></MyProvider>);
}

这些是 React 开发中一些基本的操作和概念。通过掌握这些技巧，你可以构建出功能丰富且高效的 React 应用。

在 React 中，创建和嵌套组件、添加标签和样式、显示数据、渲染条件和列表、对事件做出响应并更新界面以及在组件间共享数据是常见的任务

文章目录 1. 创建和嵌套组件创建组件嵌套组件 2. 添加标签和样式添加标签添加样式 3. 显示数据显示静态数据显示动态数据 4. 渲染条件和列表条件渲染列表渲染 5. 对事件做出响应并更新界面处理事件 6. 在组件间共享数据使用 Context API react 如何创建和嵌套组件如何添加标签…...

编程日记 2025/6/22 0:59:17

Android命令行工具--dumpsys

dumpsys 是一种在 Android 设备上运行的工具，可提供有关系统服务的信息。可以使用 Android 调试桥 (adb) 从命令行调用 dumpsys，获取在连接的设备上运行的所有系统服务的诊断输出。此输出通常比您想要的更详细，因此请使用此页面上的命令行选…...

编程日记 2025/6/2 1:54:46

设计模式-访问者模式

背景做一个对歌手的评价系统，观众分为男人和女人，分别对歌手做出自己的评价。传统思路： 做一个person父类，Man 和 Woman分别继承自这个父类，在这两个类中执行各自操作。问题： 可拓展性差&#xff0…...

编程日记 2025/6/3 1:46:48

Vue集成阿里云点播实现视频上传

实现方式有多种，如下是我的实现方式： 一、下载点播插件，在 public 下的 index.html 中引入阿里云点播需要的 js 插件，js 文件最好放在 cdn 上,，这里以放在 public 文件夹下的 static 文件夹中为例： <s…...

编程日记 2025/6/19 17:48:14

ByteByteGo-Forward/Reverse Proxy正/反向代理

原文链接 EP137: Proxy Vs Reverse proxy - ByteByteGo Newsletter 参考链接 Forward proxy vs. reverse proxy: Whats the difference? | TheServerSide 正向代理 （Forward Proxy） 位置：用户设备和互联网之间用途：保护客…...

编程日记 2025/6/22 0:54:19

[论文阅读] |智能体长期记忆与反思

写在前面：10月份的时候，联发科天玑9400发布，搭载这款旗舰 5G 智能体 AI 芯片的荣耀MagicOS9.0实现了一句话让手机自动操作美团点咖啡。很快商场实体店里便能看到很多品牌手机已经升级为智能体语音助手。下一步，这些智能体或许便能…...

编程日记 2025/6/19 22:10:09

Elasticsearch Kibana （windows版本）安装和启动

目录 1.安装 2.启动 elasticsearch 3.启动 kibana 1.安装 elasticsearch下载，官网链接： Download Elasticsearch | Elastichttps://www.elastic.co/downloads/elasticsearch kibana下载，官网链接： Download Kibana Free | G…...

编程日记 2025/6/1 9:03:07

CSS系列（9）-- Transform 变换详解

前端技术探索系列：CSS Transform 变换详解 🔄 致读者：探索 CSS 变换的魔力 👋 前端开发者们， 今天我们将深入探讨 CSS Transform，学习如何创建引人注目的 2D 和 3D 变换效果。 2D 变换基础 &#x1f68…...

编程日记 2025/6/21 17:45:49

bs4基本运用

1. bs4基本使用 1.1. 简介 bs4的全称为 BeautifulSoup。和lxml一样，是一个html的解析器，主要功能也是解析数据和提取数据。本模块作为了解模块，实际开发中很少用这个模块去解析数据，大家可能会想为什么这个模块会逐渐被淘汰&…...

编程日记 2025/5/29 15:18:09

基础环境 apache-skywalking-apm-9.6.0.tar.gz apache-skywalking-java-agent-9.1.0.tgz elasticsearch 7.14.1 采用dockers搭建或者手动部署 kibana 可视化应用微服务版 consumer.jar eureka.jar 注册中心 provider.jar skywalking 地址 https://skywalkin…...

编程日记 2025/6/4 8:08:30

C# 和 go 关于can通信得整理

在C#中开发CAN（Controller Area Network）通信接口时，确实有一些现成的NuGet包可以简化你的开发工作。这些库通常提供了与CAN硬件接口通信所需的基本功能，如发送和接收CAN消息。下面是一些常用的NuGet包： PCANBasic.NET…...

编程日记 2025/6/20 20:11:55

Unity类银河战士恶魔城学习总结（P179 Enemy Archer 弓箭手）

教程源地址：https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了敌人弓箭手的制作 Enemy_Archer.cs 核心功能状态机管理敌人的行为定义了多个状态对象（如 idleState、moveState、attackState 等），通过状态机管理敌人的…...

编程日记 2025/6/2 19:25:03

一、LRU缓存

LRU缓存 1.LRU缓存介绍2.LRU缓存实现3.LRU缓存总结3.1 LRU 缓存的应用3.2 LRU 缓存的优缺点 1.LRU缓存介绍 LRU是Least Recently Used 的缩写，意为“最近最少使用”。它是一种常见的缓存淘汰策略，用于在缓存容量有限时，决定哪些数据需要被删…...

编程日记 2025/6/22 0:52:02

基于python绘制数据表（上）

利用python绘制各种数据图表绘制柱形图-源码 from openpyxl import Workbook from openpyxl.chart import BarChart, Reference# 创建工作薄 wb Workbook(write_onlyTrue) # 创建工作表 ws wb.create_sheet(月收入)# 准备数据 rows [(月份, 销售额),(1, 23),(2, 43),(3, …...

编程日记 2025/6/2 13:10:01

Python Segmentation fault错误定位办法

1. 说明 Python3执行某一个程序时，报Segmentation fault (core dumped)错，但没有告知到底哪里出错，无法查问题，这时就需要一个库faulthandler来帮助分析。 2. 安装faulthandler faulthandler在Python3.3之后成为标准库&#xf…...

编程日记 2025/6/4 11:18:12

快速在远程服务器执行命令、批量在多个服务器执行命令（基于sshpass的自定义脚本fastsh）

在日常服务器操作中，很多时候我们需要同时操作多个服务器。特别对于那些每个服务器都需要操作相同命令的场景，不断的切换命令会话窗口会比较麻烦。基于此，编写了本文中的 fastsh 脚本用于轻度解决这种问题，提高一定的便利性。使…...

编程日记 2025/6/19 19:20:25

Java基于SpringBoot的企业OA管理系统，附源码

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/6/22 0:45:06

SSM 垃圾分类系统——环保领域的创新引擎

第1章概述 1.1 研究背景随着现代网络技术发展，对于垃圾分类系统现在正处于网络发展的阶段，所以对它的要求也是比较严格的，要从这个系统的功能和用户实际需求来进行对系统制定开发的发展方式，依靠网络技术的的快速发展和现代通讯…...

编程日记 2025/6/20 21:03:03

websocker的java集成过程

第一步：引入依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 第二步设置配置类： // 需要注入Bean的话必须声明为配置类 Co…...

编程日记 2025/6/21 1:32:26

如何对小型固定翼无人机进行最优的路径跟随控制？

控制架构文章继续采用的是 ULTRA-Extra无人机，相关参数如下： 这里用于guidance law的无人机运动学模型为： { x ˙ p V a cos ⁡ γ cos ⁡ χ V w cos ⁡ γ w cos ⁡ χ w y ˙ p V a cos ⁡ γ sin ⁡ χ V w cos ⁡ γ w sin ⁡ χ…...

编程日记 2025/6/21 1:41:01

03、对象的内存布局以及分配方式

在通过前面的文章了解到当一个程序启动的时候，会把一个java文件通过编译成class文件，然后把class字节码加载到JVM内存中，并初始化各种变量和对象实例，同时建立起具体的内存模型进行线程间的数据交换，在这之间对象的实例…...

编程日记 2025/6/20 8:34:02

「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门

本篇将通过 Python 和 Cangjie 双语介绍动态规划的基本概念，并解决一个经典问题：斐波那契数列。学生将学习如何使用动态规划优化递归计算，并掌握编程中的重要算法思想。关键词小学奥数Python Cangjie动态规划斐波那契数列一、题目描述 …...

编程日记 2025/6/4 0:09:59

ADB在浏览器中：ya-webadb项目安装与配置完全指南

ADB在浏览器中：ya-webadb项目安装与配置完全指南 ya-webadb ADB in your browser [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ya/ya-webadb 项目基础介绍与编程语言 ya-webadb 是一个由 Yume-chan 开发的开源项目，它实现了ADB&#x…...

编程日记 2025/5/30 15:51:58

通过ros2启动gazebo

ros2_integration3.使用gazebo加载URDF 在老版本中，我们使用 gazebo --verbose -s libgazebo_ros_init.so -s libgazebo_ros_factory.so来启动gazebo和ros2与gazebo的桥。但在新版本中，libazebo_ros_init.so和libazebo_ros_factory.so不再被支持你…...

编程日记 2025/6/21 1:38:56

WPF 消息循环（二）

们已经知道，win32/MFC/WinForm/WPF 都依靠消息循环驱动，让程序跑起来。这里就介绍 WPF 中是如何使用消息循环来驱动程序的。 1. 背景只听说过 Dispatcher ，哪里来的消息循环？ WPF 启动运行堆栈： > WpfApp1.…...

编程日记 2025/6/2 10:39:54

基于stm32的红外测温系统设计（论文+源码）

1总体方案设计本课题为基于STM32的红外测温系统设计，在此将系统架构设计如图3.1所示， 整个系统包括STM32F103单片机，红外测温模块MLX90614，显示模块OLED12864，蜂鸣器以及按键等构成，在功能上，…...

编程日记 2025/6/2 9:43:09

分布式 Paxos算法总结

前言相关系列《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》参考文献《图解超难理解的 Paxos 算法（含伪代码）》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…...

编程日记 2025/5/31 5:28:36

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小文章目录 ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小1. 安装 Times New Roman 字体验证字体是否安装成功 2. 在 Matplotlib 中加载 Times New Roman 字体3. 在 Matplotlib 中使…...

编程日记 2025/6/21 1:28:34

[网络] UDP协议16位校验和

16位校验和是udp报头中的一个字段,绝大多数的教材和网课都会忽略这个字段,不去细究,我闲的蛋疼问了问ai,得到了一个答案,故作此文,以证明我爱学习之心惊天地泣鬼神(狗头 ai的回答仅从作用来说,它会根据整个应用层报文进行运算,生成一个准确的数字,这个数字不能保证唯一性,但根…...

编程日记 2025/6/2 10:20:11

【总结·反思·汇报·思考02】裸辞后，我的一些感想和感悟。

Hello，大家好！ 首先，我需要向大家道个歉，对不起！因为最近发生了一些事情，博客文章一直没有更新。（90度鞠躬道歉） 那么，最近到底发生了什么呢？相信大家已经从…...

编程日记 2025/6/2 17:45:44

【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）

HTML代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content_lizhongyu"widthdevice-width, initial-scale1.0"><title>小兔鲜儿-新鲜、惠民、快捷<…...

编程日记 2025/6/2 22:03:49

java 导出word锁定且部分内容解锁可编辑

使用 Apache POI 创建带编辑限制的 Word 文档在日常工作中，我们可能需要生成一些带有编辑限制的 Word 文档，例如某些段落只能被查看，而其他段落可以自由编辑。本文介绍如何使用 Apache POI 创建这样的文档，并通过代码实现相应的…...

编程日记 2025/6/21 9:17:18

Scala的隐式类

package hfd //隐式类 //任务：给之前的BaseUser添加新的功能，但是不要直接去改代码 //思路：把BaseUser通过隐式转换，改成一个新类型，而这个新类型中有这新的方法 //implicit class一个隐式转换函数类 //作用&#xff1…...

编程日记 2025/5/30 18:25:22

Jenkins流水线初体验（六）

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装（三） Harbor镜像仓库介绍&安装（四） Jenkins容器使用宿主机Docker（五） Jenkins流水线初体验（六）一、Jenkins流水线任务介绍之前采用Jenkins的自由风格构建的项目，每个步骤…...

编程日记 2025/6/3 17:23:24

RK3568(二)——字符设备驱动开发

最基础的字符设备驱动开始，重点学习 Linux 下字符设备驱动开发框架。驱动框架 Linux 应用程序对驱动程序的调用： 在 Linux 中一切皆为文件，驱动加载成功以后会在“/dev”目录下生成一个相应的文件，应用程序通过对这个名为“/de…...

编程日记 2025/6/2 13:22:39

apk反编译修改教程系列-----超简单修改apk中名称包名布局文本以及其中的文字选项手机设置中apk对应修改演示【三十三】

💝💝💝在反编译apk中，每个初学者可能最感兴趣入门的就是修改包名去更新以及其中选项文本的修改。这样循序渐进来激发学习的兴趣。了解一些apk中常见的修改方法。对于修改手机rom中的系统类等等的apk原理都是一样的。这篇是应粉丝需要的修改apk基础教程. 通过博文了解…...

编程日记 2025/6/20 11:09:02

Git-分布式版本控制工具

目录 1. 概述 1. 1集中式版本控制工具 1.2分布式版本控制工具 2.Git 2.1 git 工作流程 1. 概述在开发活动中，我们经常会遇到以下几个场景：备份、代码回滚、协同开发、追溯问题代码编写人和编写时间（追责）等。备份的话是为了…...

编程日记 2025/6/4 16:00:02

计算机进制的介绍

一.进制介绍对于整数，有四种表示方式: 1）二进制:0,1，满2进1。在golang中，不能直接使用二进制来表示一个整数，它沿用了c的特点。参考:Go语言标准库文档中文版 | Go语言中文网 | Golang中文社区 | Golang中国 //赋值…...

编程日记 2025/6/3 10:17:16

【FreeMarker】实现生成Controller根据模板勾选的内容查询

需求：根据模板列表勾选的字段查询列表数据 FreeMarker代码： /*** 分页列表查询** param ${entityName?uncap_first}* param pageNo* param pageSize* param req* return*///AutoLog(value "${tableVo.ftlDescription}-分页列表查询")ApiOp…...

编程日记 2025/6/21 11:27:31

Redis 基础

一. redis 概述 Redis 是一个开源的、高性能的键值对（key-value）存储数据库，通常用作缓存、消息队列或持久化的数据存储。它的全称是 REmote DIctionary Server，最初由 Salvatore Sanfilippo 开发并于2009年发布。 redis 关键特点…...

编程日记 2025/6/21 20:04:53

【Linux】深入理解GCC/G++编译流程及库文件管理

目录 1.背景知识 2.gcc/g如何完成编译 (1) 预处理（进行宏替换） (2) 编译（生成汇编） (3) 汇编（生成机器可识别代码） (4) 链接（生成可执行文件或库文件） (5) 总结 (6) 函数库 …...

编程日记 2025/5/31 2:04:12

分布式窗口算法总结

前言相关系列《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》参考文献《【算法】令牌桶算法》固定窗口算法简介固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...

编程日记 2025/6/20 1:51:01

多分类交叉熵与稀疏分类交叉熵

总结：标签为 One-hot 编码的多分类问题，用分类交叉熵对于标签为整数的多分类问题，用稀疏分类交叉熵稀疏分类交叉熵内部会将整数标签转换为 One-hot 编码，而如果标签已经是 One-hot 编码的形式，再使用稀疏分类交叉熵就会多此一举。算例假设我们有三个类别：A、B 和 C。…...

编程日记 2025/6/2 3:05:18

ElasticSearch 简介

一、什么是 ElastcSearch？ ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引索引类似与 mysql 中的数据库，ES 中的索引是存储数据的地方，包含了一堆有相似结构的文档数据…...

编程日记 2025/6/1 19:57:39