react的三大属性
react的三大属性 state props refs
- props 来自外部属性
- states 来自内部状态
- refs 用于表示组件内某个元素
state基础（最重要的属性）
- state是组件对象最重要的属性，其值是对象，即可以包含多个数据
- 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）
state 操作
初始化状态
constructor(props){
super(props)
this.state = { //this是一个组件对象
stateProp1: value1,
stateProp2: value2
}
}
读取某个状态值
this.state.statePropertyName
更新状态，组件界面更新
this.setState({
stateProp1: value1,
stateProp2: value2
})
state属性示例–监听点击事件，然后状态改变
定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> class Myname extends React.Component {
constructor (props) {
//调用父类的构造函数
super(props)
//1、初始化状态——固定写法
this.state = {
isMyname: true
}
//[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法
this.change = this.change.bind(this) }
//新增自定义方法:内部的this默认不是组件对象，而是undefined
change () {
//3、更新状态，需要让this指向组件对象
this.setState({
isMyname: !this.state.isMyname
})
}
//重写组件类方法
render () { const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'
return <h2 onClick={this.change}>{text}</h2>
}
}
ReactDOM.render(<Myname />, document.getElementById('test')) </script>
</body>
</html>
props 属性
作用：复用
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="../js/prop-types.js"></script> <script type="text/babel"> // 1、定义组件:方式1
function Person(props) {
return (
<ul>
<li>name：{props.name}</li>
<li>age：{props.age}</li>
<li>sex：{props.sex}</li>
</ul>
)
}
//方式2：使用类方式定义组件（运行时请将其中一个方式注释）
class Person extends React.Component {
render() {
return (
<ul>
<li>name：{this.props.name}</li>
<li>age：{this.props.age}</li>
<li>sex：{this.props.sex}</li>
</ul>
)
}
}
//指定默认值
Person.defaultProps = {
name:'imaginecode',
age: 17,
sex:'woman'
}
//指定属性值的类型和必要性--使用prop-types.js库
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
} // 2、渲染组件标签
const p1 = {
name:'imaginecode',
age: 19,
sex:'man'
} ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));
const p2 = {
name:'imaginecode2'
} ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));
</script>
</body>
</html>
为组件指定默认属性值，组件属性defaultProps：
Person.defaultProps = {name:''}
对props中的属性值进行类型限制和必要性限制,组件属性propTypes：
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired
}
refs 属性
（1）ref用于标识组件内部某个元素
（2）refs 是标识集合
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="text1"></div>
<div id="text2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="../js/prop-types.js"></script> <script type="text/babel">
//1、先定义组件
class InputComp extends React.Component {
constructor(props) {
super(props)
//先对自定义函数进行bind操作
this.showInput = this.showInput.bind(this);
this.handleBlur = this.handleBlur.bind(this); }
showInput(event) {
console.log(this);
alert(this.inputVal.value);
}
handleBlur(event) {//利用所有的事件均有一个event属性
alert(event.target.value);
}
render() {
return(
//this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素
<div>
<input type="text" ref={input => this.inputVal=input}/>
<button onClick={this.showInput}>点击获取值</button>
<input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
</div>
)
}
}
//2、渲染组件标签
ReactDOM.render(<InputComp />,document.getElementById('text1'));
</script>
</body>
</html>
react的三大属性的更多相关文章
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 组件的三大属性state，props，refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- JS中Array数组的三大属性用法
原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- React Native声明属性和属性确认
属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...
随机推荐
- mysql知识点归纳-执行计划篇
愿历尽千帆,归来仍是少年 缘由: 优化sql,顾此记录一下,以便温习之用. 前置: sql执行过程:客户端 -> 连接器 -> 分析器 (或查询缓存 - > end) -> 优 ...
- 25.Qt Quick QML-500行代码实现"合成大西瓜游戏"
"合成大西瓜"这个游戏在年前很火热,还上过微博热搜,最近便玩了一阵还挺有意思的,所以研究了一下小球碰撞原理,自己亲自手写碰撞算法来实现一个合成大西瓜游戏.并支持任意大小布局,你想玩 ...
- [其他] vscode 快速教程
概述 vs:集成开发环境,包括软件生命周期中需要的大部分工具,如UML,代码管控,IDE等 vs code:代码编辑器,支持插件扩展,对网页和云端开发做了优化 快捷键 F1/ctrl+shift+p: ...
- date命令月日时分年
# date +%Y/%m/%d2019/09/29[root@a-3e5 lpts-20190910-keyan-v0.2]# date +%H:%M20:00
- docker容器中日志文件过大处理方法
背景 :在日常工作中一个基于centos镜像构建起来的python爬虫程序,日志文件在两个月内到了500G,日志存放在根目录下面,在不扩容的情况下把这个问题给解决掉.通过定时任务和脚本的方法,定期的清 ...
- ELK学习实验016：filebeat收集tomcat日志
filebeat收集tomcat日志 1 安装tomcat [root@node4 ~]# yum -y install tomcat tomcat-webapps tomcat-admin-weba ...
- linux基础之基础命令一
本节内容: 1. ls:列出当前目录下的文件和目录 -l: 长输出,显示文件的详细信息(-普通文本,d目录) -a: 显示所有文件,包括隐藏文件 -h: 人类易读(-lh) -d: 显示目录信息(-l ...
- IDEA 创建 Maven 项目每次都需要重新配置问题
问题描述 通过 File->Settings 设置 maven 配置,在 IDEA 新创建 Maven 项目时设置的 maven 配置会被重置,导致每次创建新 Maven 项目都需要重新设置一遍 ...
- String 是一个奇怪的引用类型
开局两张图,内容全靠刷! 马甲哥看到这样的现象,一开始还是有点懵逼. 这个例子,string是纯粹的引用类型,但是在函数传值时类似于值传递: 我之前给前后示例的内存变化图吧: 根因就是大多数高级语言都 ...
- 吐血整理！Python常用第三方库，码住！！！
Python作为一种编程语言近年来越来越受欢迎,它为什么这么火? 其中一个重要原因就是因为Python的库丰富--Python语言提供超过15万个第三方库,Python库之间广泛联系.逐层封装.几 ...