React三大属性

我是南城余!阿里云开发者平台专家博士证书获得者!

欢迎关注我的博客!一同成长!

一名从事运维开发的worker,记录分享学习。

专注于AI,运维开发,windows Linux 系统领域的分享!

知识库链接:

D2 · 语雀


组件的实例对象三大属性

这三个核心都是建立在类定义的组件上,因为函数建立的组件没有,因此称为组件的实例对象三大属性

1. state的简写方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello,React study by nanchengyu</title>
</head>
<body>
<div id="test"></div>
<!--引入React核心库 引入顺序有要求必须按照下方1在2前-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">  /*此处一定要写babel*/
//1.创建类组件
class Weather extends React.Component {//1.1 初始化状态state ={isHot:false,wind:'微风'}render() {//读取状态const {isHot,wind} = this.statereturn <h2 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h2>}//1.2 自定义方法 用赋值语句的形式+箭头函数changeWeather =()=>{const isHot = this.state.isHotthis.setState({isHot:!isHot})}}//2.渲染组件到test上
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script></body>
</html>

2. props的简写

props 用于从父组件传递数据给子组件,而 state 用于管理组件内部的状态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello,React study by nanchengyu</title>
</head>
<body>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!--引入React核心库 引入顺序有要求必须按照下方1在2前-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--用于对组件标签属性的限制-->
<script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">  /*此处一定要写babel*/
//1.创建类组件
class Person extends React.Component {static propTypes = {name:PropTypes.string.isRequired, /*对Person类的属性进行限制*/sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func,}static defaultProps = {sex: '男', age: 18}//状态写在属性后面// state ={isHot:false,wind:'微风'}render() {//读取状态const {name, age, sex} = this.props //props是只读状态return (<ul><li>姓名:{name}</li><li>年龄:{age}</li><li>性别:{sex}</li></ul>)}}//2.渲染组件到test上
ReactDOM.render(<Person name="ncy" age={20} sex="男" speak="1"/>, document.getElementById('test'))
ReactDOM.render(<Person name="nanchengyu" age={20} sex="男"/>, document.getElementById('test1'))
ReactDOM.render(<Person name="wife" age={20} sex="女"/>, document.getElementById('test2'))// function speak(){
//     console.log("全网同名:南城余")
// }
</script></body>
</html>

3. refs

refs类似于原生的id标签 用于表示html标签<>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

只会 Python 不行,不会 Python 万万不行 。。。

当下的环境大家有目共睹&#xff0c;未来一段时间情况如何&#xff0c;想必不少人心里也清楚&#xff0c;技术人走到中年&#xff0c;难免会焦虑&#xff0c;职场上干得不爽&#xff0c;但是跳槽也不容易&#xff0c;加上不少企业裁员&#xff0c;换个满意的工作更是难上加难。…

数学建模--Radar图绘制

1.Radar图简介 最近在数学建模中碰见需要绘制Radar图(雷达图)的情况来具体分析样本的各个特征之间的得分与优劣关系&#xff0c;这样的情况比较符合雷达图的使用场景&#xff0c;一般来说&#xff0c;雷达图适用于展示多个维度的数据&#xff0c;并在一个平面上直观地呈现出不同…

长虹智能电视ZLS58Gi4X机芯刷机升级方法,附整机USB升级固件数据 U3、1U、U1、U3C、6000i系列等适用

适用机芯&#xff1a;ZLS58Gi4X 适用机型&#xff1a; 40U3、65U3、43A1U、49A1U、55A1U、43C1U、50C1U、43U1、49U1、50U1、55U1、58U1、43U1A、49U1A、50U1A、55U1A、58U1A、43U3C、49U3C、50U3C、55U3C、43Z80U、50Z80U、55Z80U、LED49Z80U、LED55Z80U、UD43D6000i、UD49D…

sql数据库的相关概念与底层介绍

本文中的数据库指的是磁盘数据库。如果有sql语言&#xff08;CRUD&#xff0c;增删改查&#xff09;的使用经验会更容易理解本文的知识点。 数据库与redis的区别 数据库&#xff1a;数据存储长期在磁盘中&#xff0c;小部分频繁需要的数据会被临时提取在内存中。 Redis&…

np.argsort排序问题(关于位次)-含GitHub上在numpy项目下提问的回复-总结可行方案

np.argsort 与获取位相关问题 位次: 数组中的数据在其排序之后的另一个数组中的位置 [1,0,2,3] 中 0的位次是1 1的位次是2 2的位次是3 3的位次是4 这里先直接给出结论&#xff0c;np.argsort()返回的索引排序与实际位次在确实在某些情况下会出现一致&#xff0c;但后来numpy的开…

用pandas实现用前一行的excel的值填充后一行

今天接到一份数据需要分析&#xff0c;数据在一个excel文件里&#xff0c;内容大概形式如下&#xff1a; 后面空的格子里的值就是默认是前面的非空的值&#xff0c;由于数据分析的需要需要对重复的数据进行去重&#xff0c;去重就需要把控的cell的值补上&#xff0c;然后根据几…

HCIP网络的类型

一.网络类型&#xff1a; 点到点 BMA&#xff1a;广播型多路访问 -- 在一个MA网络中同时存在广播&#xff08;泛洪&#xff09;机制 NBMA&#xff1a;非广播型多路访问 -- 在一个MA网络中&#xff0c;没有泛洪机制-----不怎么使用了 MA&#xff1a;多路访问 -- 在一个…

JavaEE 文件操作IO

文件操作&IO 文章目录 文件操作&IO1. 认识文件2. 文件操作2.1 File 类2.2 文件读写2.2.1 FileInputStream2.2.2 FileOutputStream2.2.3 FileReader2.2.4 FileWriter2.2.5 Scanner读取文件 3. 案例练习3.1 案例一3.2 案例二3.3 案例三 在进行文件操作之前&#xff0c;我…

Vue 如何使用WebSocket与服务器建立链接 持续保持通信

WebSocket 浏览器通过JavaScript向服务器发出建立WebSocket链接的请求&#xff0c;链接建立后&#xff0c;客户端和服务器端就可以通过TCP链接直接交互数据。WebSocket链接后可以通过send()方法来向服务器发送数据&#xff0c;并通过onnessage事件来接受服务器返回的数据。 创…

C语言大师(5)构造函数和析构函数

引言 在C的面向对象编程中&#xff0c;构造函数和析构函数扮演着至关重要的角色。它们分别管理对象的初始化和销毁过程&#xff0c;确保资源的有效分配和释放。了解这些函数如何工作&#xff0c;对于编写高效和可靠的C程序至关重要。 1. 构造函数 构造函数在每次创建类的新对…

数据操作——缺失值处理

缺失值处理 缺失值的处理思路 如果想探究如何处理无效值, 首先要知道无效值从哪来, 从而分析可能产生的无效值有哪些类型, 在分别去看如何处理无效值 什么是缺失值 一个值本身的含义是这个值不存在则称之为缺失值, 也就是说这个值本身代表着缺失, 或者这个值本身无意义, 比如…

GPT应用程序的开发注意事项

GPT应用程序的开发语言可以选择多种语言&#xff0c;主要取决于您的偏好、团队的技能以及应用程序的具体需求。以下是一些常见的用于GPT应用程序开发的编程语言&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交…

项目管理流程

优质博文 IT-BLOG-CN 一、简介 项目是为提供某项独特产品【独特指:创造出与以往不同或者多个方面与以往有所区别产品或服务&#xff0c;所以日复一日重复的工作就不属于项目】、服务或成果所做的临时性【临时性指:项目有明确的开始时间和明确的结束时间&#xff0c;不会无限期…

深入探讨JavaSE:从基础到高级

目录 1. JavaSE的基础知识 2. 标准API库 3. 异常处理与调试技巧 4. JavaSE的高级特性 5. JavaSE与新技术的整合 结语 JavaSE&#xff08;Java Standard Edition&#xff09;是Java平台的标准版&#xff0c;是Java编程语言的基础。它提供了一系列核心的API和工具&#xff0…

【Web前端开发基础】CSS的盒子模型

CSS的盒子模型 一、学习目标 能够认识不同选择器的优先级公式能够进行CSS权重叠加计算&#xff0c;分析并解决CSS 冲突问题能够认识盒子模型的组成部分能够掌握盒子模型的边框、内边距、外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象&#xff0c;并知…

Linux用户空间和内核空间所有15种内存分配方法

在Linux操作系统中&#xff0c;内存管理是一个关键的系统功能。用户空间和内核空间分别使用不同的函数来申请内存。以下是用户空间和内核空间内存申请函数的详细列表&#xff1a; Linux用户空间内存申请函数 1. malloc() 函数&#xff1a; void* malloc(size_t size); 用于…

在IDEA中使用快捷键让XML注释更加规范

Setting -> Editor -> Code Style -> XML 取消勾选 Line comment at first column 这样我们在使用ctrl / 快速注释时&#xff0c;就可以让注释符号紧贴注释内容&#xff0c;不出现空格。

如何唯一标识一个进程

如何唯一标识一个进程 进程ID (PID)&#xff1a; 每个运行中的进程都有一个全局唯一的整数标识符&#xff0c;称为进程ID&#xff08;Process ID&#xff09;。PID由内核分配&#xff0c;并在整个系统范围内保持唯一。 在shell中输入echo $$来查看当前shell的进程ID&#xf…

java 中 Iterator 与Iterable的作用

如果需要按照元素的自然顺序进行排序&#xff0c;应该使用哪个集合类&#xff1f; 如果需要按照元素的自然顺序进行排序&#xff0c;应该使用TreeSet或TreeMap集合类。 TreeSet&#xff1a;TreeSet 是一个有序的集合&#xff0c;它会使用元素的自然顺序对元素进行排序&#xf…

ip_vs 的管理以及 keepalived + lvs 案例

ip_vs 的管理 ipvsadm 与 keepalived for lvs ipvsadm 命令及参数介绍 部署和配置LVS服务会经常用到一些命令&#xff0c;如ipvsadm&#xff0c;可以使用“ipvsadm -help”命令查看使用帮助。 ipvsadm 命令的常用参数及其说明如下&#xff1a; # 添加虚拟服务器# 语法&#x…