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

React 组件

news 2026/2/9 16:45:23

文章目录

  • React 组件
  • 复合组件

React 组件

在这里插入图片描述

本节将讨论如何使用组件使得我们的应用更容易来管理。

接下来我们封装一个输出 “Hello World！” 的组件，组件名为 HelloMessage：

React 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">var HelloMessage = React.createClass({render: function() {return <h1>Hello World！</h1>;}});ReactDOM.render(<HelloMessage />,document.getElementById('example'));</script>
</body>
</html>

运行效果：
在这里插入图片描述

实例解析：

React.createClass 方法用于生成一个组件类 HelloMessage。

<HelloMessage /> 实例组件类并输出信息。

注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

React 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">var HelloMessage = React.createClass({render: function() {return <h1>Hello {this.props.name}</h1>;}});ReactDOM.render(<HelloMessage name="www.csdn.net" />,document.getElementById('example'));</script>
</body>
</html>

运行效果：
在这里插入图片描述

以上实例中 name 属性通过 this.props.name 来获取。

注意：在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

React 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">var WebSite = React.createClass({render: function() {return (<div><Name name={this.props.name} /><Link site={this.props.site} /></div>);}
});var Name = React.createClass({render: function() {return (<h1>{this.props.name}</h1>);}
});var Link = React.createClass({render: function() {return (<a href={this.props.site}>{this.props.site}</a>);}
});ReactDOM.render(<WebSite name="CSDN" site=" http://www.csdn.net" />,document.getElementById('example')
);</script>
</body>
</html>

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。

相关文章：

React 组件

文章目录 React 组件复合组件 React 组件 本节将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封装一个输出 “Hello World&#xff01;” 的组件&#xff0c;组件名为 HelloMessage&#xff1a; React 实例 <!DOCTYPE html> <html> <head> &…...

编程日记 2023/5/11 15:25:40

硕士学位论文的几种常见节奏

摘要: 本文描述硕士学位论文的几种目录结构, 特别针对机器学习方向. 1. 基础版 XX算法及其在YY中的应用 针对情况: 只有一篇小论文支撑. 第 1 章: 引言 ( > 5页) 1.1 背景及意义 (应用背景、研究意义, 2 页) 1.2 研究进展及趋势 (算法方面, 2 页) 1.3 论文结构 (1 页) 第 …...

编程日记 2023/5/11 15:20:39

找兄弟单词

描述 定义一个单词的“兄弟单词”为&#xff1a;交换该单词字母顺序&#xff08;注&#xff1a;可以交换任意次&#xff09;&#xff0c;而不添加、删除、修改原有的字母就能生成的单词。 兄弟单词要求和原来的单词不同。例如&#xff1a; ab 和 ba 是兄弟单词。 ab 和 ab 则不…...

编程日记 2023/6/1 8:36:57

python字典翻转教学

目录 第1关 创建大学英语四级单词字典 第2关 合并大学英语四六级词汇字典 第3关 查单词输出中文释义 第4关 删除字典中特定字母开头的单词 第5关 单词英汉记忆训练 第1关 创建大学英语四级单词字典 本关任务&#xff1a;编写一个能创建大学英语四级单词字典的小程序。 测…...

编程日记 2023/5/11 15:10:36

sentinel 随笔 3-降级处理

0. 像喝点东西&#xff0c;但不知道喝什么 先来段源码&#xff0c;看一下 我们在dashboard 录入的降级规则&#xff0c;都映射到哪些字段上 package com.alibaba.csp.sentinel.slots.block.degrade;public class DegradeRule extends AbstractRule {public DegradeRule(String…...

编程日记 2023/5/11 15:05:35

如何解决IP能ping通但无法上网的问题？

当我们在网络环境中遇到无法上网的问题时&#xff0c;可能会尝试使用ping命令来测试网络连接是否正常。如果ping测试成功&#xff0c;说明我们的IP地址能够和网络中其他设备进行通信&#xff0c;但是无法上网。这种情况下&#xff0c;我们需要采取一些措施来解决这个问题。本文…...

编程日记 2023/5/11 15:00:33

Autosar实践-CANTp

文章目录 前言一、CanTp是什么？二、Autosar配置三、诊断数据传输流程1.接收单帧失败，上层没有适当的buffer2.成功接收单帧3.成功发送单帧4.成功接收多帧5.成功发送多帧前言 CANTp模块作为提供数据拆包、组包、流控制传输的服务，在Autosar基础软件通信中起着至关重要的作用。…...

编程日记 2023/5/11 14:55:32

Redis简介

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的键值对&#xff08;key-value&#xff09;数据库&#xff0c;支持网络、可基于内存亦可持久化。 Redis的数据结构包括列表&#xff08;List&#xff09;、集合&#xff08;Set&#xff09;、有序集合&#…...

编程日记 2023/5/11 14:50:26

报错问题修改

Vue 项目报错&#xff1a;‘$‘ is not defined ( no-undef ) 错误原因是不认识 $ 符&#xff0c;他是 JQuery 中得符号&#xff0c;引入了 JQuery 文件里的函数报错onclick is not defined问题(作用域问题) window.onload function (){ onload function (){ 第二种方法…...

编程日记 2023/5/11 14:45:25

专访惠众科技｜元宇宙应用如何借助3DCAT实时云渲染实现流畅大并发呈现？

当前互联网流量红利已经逐渐消失&#xff0c;营销同质化愈发严重。在这样的背景下&#xff0c;催生了以为元宇宙 焦点的虚拟产业经济。元宇宙在各行各业中以不同形式快速萌生、成长&#xff0c;呈现出多元化的应用场景。尤其是众多品牌&#xff0c;将元宇宙视为品牌建设与营销新…...

编程日记 2023/5/11 14:40:24

加速开放计算产业化，OCTC五大原则瞄准需求痛点

回顾计算产业过去十余载的历程&#xff0c;开放计算始终是一个绕不开的核心焦点。 始于2011年Facebook发起的数据中心硬件开源项目--开放计算项目&#xff08;简称&#xff1a;OCP&#xff09;&#xff0c;开放计算犹如星星之火&#xff0c;不仅迅速形成燎原之势&#xff0c;更…...

编程日记 2023/5/11 14:35:23

【RabbitMQ】安装及六种模式

文章目录 安装rabbitmq镜像访问容器内部15672端口映射到外面的端口地址RabbitMQ六种模式Hello world模式Work queues模式Publish/Subscribe模式交换机fanout类型 Routing模式Topics模式RPC模式 rabbitmq&#xff1a;0->1的学习 学习文档&#xff1a;https://www.cnblogs.com…...

编程日记 2023/5/11 14:30:22

数据结构刷题（三十一）：1049. 最后一块石头的重量 II、完全背包理论、518零钱兑换II

一、1049. 最后一块石头的重量 II 1.思路&#xff1a;01背包问题&#xff0c;其中dp[j]表示容量为j的背包&#xff0c;最多可以背最大重量为dp[j]。 2.注意&#xff1a;递推公式dp[j] max(dp[j], dp[j - stones[i]] stones[i]);本题中的重量就是价值&#xff0c;所以第二个…...

编程日记 2023/5/11 14:25:21

opencv_c++学习（四）

图像在opencv中的存储方式 在上图中可以看出&#xff0c;在opencv中采用的是像素值来代表每一个像素三通道颜色的深浅。 Mat对象 Mat对象是在OpenCV2.0之后引进的图像数据结构、自动分配内存、不存在内存泄漏的问题&#xff0c;是面向对象的数据结构。分了两个部分&#xff0…...

编程日记 2023/5/11 14:20:20

基于AT89C51单片机的篮球计时记分设计

点击链接获取Keil源码与Project Backups仿真图： https://download.csdn.net/download/qq_64505944/87771065 源码获取 主要内容： 基于51单片机设计篮球计时计分器，结合单片机串行接口原理，用AT89C51设计一个篮球比赛计分计时器，能够通过数码管显示分数和比赛时间（并设有…...

编程日记 2023/5/11 14:15:19

并发编程-Day2

并发编程 1.共享模型-内存 共享变量在多线程间的<可见性>问题与多条指令执行时的<有序性>问题 1.1Java内存模型 JMM它定义了主存、工作内存抽象概念,底层对应着CPU寄存器、缓存、硬件内存CPU指令优化等. JMM体现在&#xff1a; 原子性-保证指令不会受到线程上…...

编程日记 2023/5/11 14:10:18

第1章 Nginx简介

基于 Nginx版本 1.14.2 &#xff0c;Tomcat版本 9.0.0 演示 第1章 Nginx简介 1.1 Nginx发展介绍 Nginx &#xff08;engine x&#xff09; 是一个高性能的Web服务器和反向代理服务器&#xff0c;也可以作为邮件代理服务器。 Nginx 特点是占有内存少&#xff0c;并发处理能力…...

编程日记 2023/5/11 14:05:16

一个.Net功能强大、易于使用、跨平台开源可视化图表

可视化图表运用是非常广泛的&#xff0c;比如BI系统、报表统计等。但是针对桌面应用的应用&#xff0c;很多报表都是收费的&#xff0c;今天给大家推荐一个免费.Net可视化开源的项目&#xff01; 项目简介 基于C#开发的功能强大、易于使用、跨平台高质量的可视化图表库&#…...

编程日记 2023/5/11 14:00:15

浅谈 ext2 文件系统的特点、优缺点以及使用场景

ext2&#xff08;Extended File System 2&#xff09;是 Linux 中最早的一种文件系统&#xff0c;它是 Linux 文件系统的基础&#xff0c;也被广泛用于其他类 Unix 系统中。下面是 ext2 文件系统的特点、优缺点以及使用场景&#xff1a; 特点&#xff1a; ext2 文件系统可以支…...

编程日记 2023/5/11 13:55:15

Map和Set数据结构和ES6模块化语法

Map和Set数据结构 ●ES6 新增的两种数据结构 ●共同的特点: 不接受重复数据 Set数据结构 ●是一个 类似于 数组的数据结构 ●按照索引排列的数据结构 创建 Set 数据结构 语法: var s new Set([ 数据1, 数据2, 数据3, ... ]) Set 数据结构的属性和方法 ●size 属性 ○语法: 数…...

编程日记 2023/5/11 13:50:14

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/7 17:44:12

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/2/8 1:53:31

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

编程新知 2026/2/7 14:13:17

FOPLP vs CoWoS

以下是 FOPLP&#xff08;Fan-out panel-level packaging 扇出型面板级封装&#xff09;与 CoWoS&#xff08;Chip on Wafer on Substrate&#xff09;两种先进封装技术的详细对比分析&#xff0c;涵盖技术原理、性能、成本、应用场景及市场趋势等维度&#xff1a; 一、技术原…...

编程新知 2025/10/24 6:08:42