React 组件
文章目录
- 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！” 的组件，组件名为 HelloMessage： React 实例 <!DOCTYPE html> <html> <head> &…...
硕士学位论文的几种常见节奏
摘要: 本文描述硕士学位论文的几种目录结构, 特别针对机器学习方向. 1. 基础版 XX算法及其在YY中的应用 针对情况: 只有一篇小论文支撑. 第 1 章: 引言 ( > 5页) 1.1 背景及意义 (应用背景、研究意义, 2 页) 1.2 研究进展及趋势 (算法方面, 2 页) 1.3 论文结构 (1 页) 第 …...
找兄弟单词
描述 定义一个单词的“兄弟单词”为：交换该单词字母顺序（注：可以交换任意次），而不添加、删除、修改原有的字母就能生成的单词。 兄弟单词要求和原来的单词不同。例如： ab 和 ba 是兄弟单词。 ab 和 ab 则不…...
python字典翻转教学
目录 第1关 创建大学英语四级单词字典 第2关 合并大学英语四六级词汇字典 第3关 查单词输出中文释义 第4关 删除字典中特定字母开头的单词 第5关 单词英汉记忆训练 第1关 创建大学英语四级单词字典 本关任务：编写一个能创建大学英语四级单词字典的小程序。 测…...
sentinel 随笔 3-降级处理
0. 像喝点东西，但不知道喝什么 先来段源码，看一下 我们在dashboard 录入的降级规则，都映射到哪些字段上 package com.alibaba.csp.sentinel.slots.block.degrade;public class DegradeRule extends AbstractRule {public DegradeRule(String…...
如何解决IP能ping通但无法上网的问题？
当我们在网络环境中遇到无法上网的问题时，可能会尝试使用ping命令来测试网络连接是否正常。如果ping测试成功，说明我们的IP地址能够和网络中其他设备进行通信，但是无法上网。这种情况下，我们需要采取一些措施来解决这个问题。本文…...
Autosar实践-CANTp
文章目录 前言一、CanTp是什么？二、Autosar配置三、诊断数据传输流程1.接收单帧失败，上层没有适当的buffer2.成功接收单帧3.成功发送单帧4.成功接收多帧5.成功发送多帧前言 CANTp模块作为提供数据拆包、组包、流控制传输的服务，在Autosar基础软件通信中起着至关重要的作用。…...
Redis简介
Redis（Remote Dictionary Server）是一个开源的键值对（key-value）数据库，支持网络、可基于内存亦可持久化。 Redis的数据结构包括列表（List）、集合（Set）、有序集合&#…...
报错问题修改
Vue 项目报错：‘$‘ is not defined ( no-undef ) 错误原因是不认识 $ 符，他是 JQuery 中得符号，引入了 JQuery 文件里的函数报错onclick is not defined问题(作用域问题) window.onload function (){ onload function (){ 第二种方法…...
专访惠众科技｜元宇宙应用如何借助3DCAT实时云渲染实现流畅大并发呈现？
当前互联网流量红利已经逐渐消失，营销同质化愈发严重。在这样的背景下，催生了以为元宇宙 焦点的虚拟产业经济。元宇宙在各行各业中以不同形式快速萌生、成长，呈现出多元化的应用场景。尤其是众多品牌，将元宇宙视为品牌建设与营销新…...
加速开放计算产业化，OCTC五大原则瞄准需求痛点
回顾计算产业过去十余载的历程，开放计算始终是一个绕不开的核心焦点。 始于2011年Facebook发起的数据中心硬件开源项目--开放计算项目（简称：OCP），开放计算犹如星星之火，不仅迅速形成燎原之势，更…...
【RabbitMQ】安装及六种模式
文章目录 安装rabbitmq镜像访问容器内部15672端口映射到外面的端口地址RabbitMQ六种模式Hello world模式Work queues模式Publish/Subscribe模式交换机fanout类型 Routing模式Topics模式RPC模式 rabbitmq：0->1的学习 学习文档：https://www.cnblogs.com…...
数据结构刷题（三十一）：1049. 最后一块石头的重量 II、完全背包理论、518零钱兑换II
一、1049. 最后一块石头的重量 II 1.思路：01背包问题，其中dp[j]表示容量为j的背包，最多可以背最大重量为dp[j]。 2.注意：递推公式dp[j] max(dp[j], dp[j - stones[i]] stones[i]);本题中的重量就是价值，所以第二个…...
opencv_c++学习（四）
图像在opencv中的存储方式 在上图中可以看出，在opencv中采用的是像素值来代表每一个像素三通道颜色的深浅。 Mat对象 Mat对象是在OpenCV2.0之后引进的图像数据结构、自动分配内存、不存在内存泄漏的问题，是面向对象的数据结构。分了两个部分࿰…...
基于AT89C51单片机的篮球计时记分设计
点击链接获取Keil源码与Project Backups仿真图： https://download.csdn.net/download/qq_64505944/87771065 源码获取 主要内容： 基于51单片机设计篮球计时计分器，结合单片机串行接口原理，用AT89C51设计一个篮球比赛计分计时器，能够通过数码管显示分数和比赛时间（并设有…...
并发编程-Day2
并发编程 1.共享模型-内存 共享变量在多线程间的<可见性>问题与多条指令执行时的<有序性>问题 1.1Java内存模型 JMM它定义了主存、工作内存抽象概念,底层对应着CPU寄存器、缓存、硬件内存CPU指令优化等. JMM体现在： 原子性-保证指令不会受到线程上…...
第1章 Nginx简介
基于 Nginx版本 1.14.2 ，Tomcat版本 9.0.0 演示 第1章 Nginx简介 1.1 Nginx发展介绍 Nginx （engine x） 是一个高性能的Web服务器和反向代理服务器，也可以作为邮件代理服务器。 Nginx 特点是占有内存少，并发处理能力…...
一个.Net功能强大、易于使用、跨平台开源可视化图表
可视化图表运用是非常广泛的，比如BI系统、报表统计等。但是针对桌面应用的应用，很多报表都是收费的，今天给大家推荐一个免费.Net可视化开源的项目！ 项目简介 基于C#开发的功能强大、易于使用、跨平台高质量的可视化图表库&#…...
浅谈 ext2 文件系统的特点、优缺点以及使用场景
ext2（Extended File System 2）是 Linux 中最早的一种文件系统，它是 Linux 文件系统的基础，也被广泛用于其他类 Unix 系统中。下面是 ext2 文件系统的特点、优缺点以及使用场景： 特点： ext2 文件系统可以支…...
Map和Set数据结构和ES6模块化语法
Map和Set数据结构 ●ES6 新增的两种数据结构 ●共同的特点: 不接受重复数据 Set数据结构 ●是一个 类似于 数组的数据结构 ●按照索引排列的数据结构 创建 Set 数据结构 语法: var s new Set([ 数据1, 数据2, 数据3, ... ]) Set 数据结构的属性和方法 ●size 属性 ○语法: 数…...
告别虚频困扰：用VASP+DynaPhoPy搞定高温材料声子谱的保姆级教程
高温材料声子谱计算实战：从虚频困境到非谐解决方案 引言：虚频问题的根源与突破路径 在计算材料学领域，声子谱分析是理解材料动力学稳定性和热力学性质的核心手段。然而许多研究者都遭遇过这样的困境：对实验合成的材料进行简谐近似…...
如何在macOS上免费解锁QQ音乐加密文件：完整指南
如何在macOS上免费解锁QQ音乐加密文件：完整指南 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac，qmc0,qmc3转mp3, mflac,mflac0等转flac)，仅支持macOS，可自动识别到QQ音乐下载目录，默认转换结果…...
解决Claude Code访问不稳定与Token不足的痛点
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 解决Claude Code访问不稳定与Token不足的痛点 许多开发者将Claude Code作为日常编程的得力助手，用于代码生成、问题调试…...
6款高效降AI率工具 改写实力出众
写论文时反复检测出的AI痕迹总让你提心吊胆？别担心，这里整理了6款真正好用的论文降AI率工具，堪称应对AI生成特征的“得力助手”。它们能有效识别并消除AI生成的痕迹，改写能力出众，帮你快速降低查重率，顺利通…...
AI学习 - 大模型基础入门
AI学习 - 大模型基础入门 从零开始：Ollama 安装 → 本地模型运行 → Python 代码接入 → 理解核心概念 摘要 本文记录了在 Windows 上使用 Ollama 部署本地大模型、并通过 Python 代码接入调用的完整过程。内容涵盖：Ollama 安装与模型拉取、大模型基础概…...
XML 服务器
XML 服务器 引言 XML（可扩展标记语言）服务器在现代互联网技术中扮演着至关重要的角色。它为数据的传输和处理提供了灵活且高效的方式。本文将深入探讨XML服务器的概念、工作原理、应用场景及其在软件开发中的重要性。 什么是XML服务器？ XML服务器是一种用于存储、处理和…...
从“DOC/PDF”到“WPS”：细看GJB438C-2021文档格式要求背后的国产化信号与落地指南
从“DOC/PDF”到“WPS”：GJB438C-2021文档格式变革的深度解读与实施策略 当一份国家军用标准在文档格式描述中刻意删除"DOC/PDF"字样，转而明确标注"（WPS）文档处理器"时，这绝非简单的技术参数调整。…...
Office RibbonX Editor：简单三步打造你的专属Office界面
Office RibbonX Editor：简单三步打造你的专属Office界面 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/gh_mirrors/of/office-ribbonx-edit…...
Unity/Unreal开发者必看：用手机和陀螺仪实验，5分钟搞懂万向节死锁（附避坑指南）
Unity/Unreal开发者实战指南：用手机陀螺仪5分钟破解万向节死锁当你调试第一人称视角时，角色突然卡在墙面无法转动；当无人机模型在俯冲90度时失控乱转——这些很可能都是万向节死锁(Gimbal Lock)在作祟。作为实时3D开发中最恼人的数学陷阱之一…...
多模型聚合平台如何助力网站AIB测试与选型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 多模型聚合平台如何助力网站AIB测试与选型 对于网站产品经理而言，首页文案的生成质量直接影响用户的第一印象和转化率。…...