React的PropTYpes
React的PropTYpes和获取真实DOM
组件的属性可以接受任意值,字符串,对象,函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
组件类的PropsTypes
属性,就是用来验证组件实例的属性是否符合要求
var myTitle = React.createClass({
propsTypes:{
title:React.PropsTypes.string.isRequired,
}
render(){
return <h1>{this.props.title}</h1>
}
});
上面的Mytitle
组件有一个title
属性。PropTypes
告诉React,这个title
属性是必须的,而且必须是字符串。
此外,getDefaultProps
方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps:function(){
return {
title:'hello world'
}
}
render(){
return (
<h1>{this.props.title}</h1>;
)
}
})
ReactDOM.render(
<MyTitle />,
document.body
)
上面代码会输出“hello world”。
获取真实的DOM节点
组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM。只有当它插入文档以后,才会变成真实的DOM。根据React的设计,所有的DOM变动,都先在虚拟的DOM上发生,然后再将实际发生变动的部分,反映在真实DOM上,这种算法叫做 DOM diff,它可以极大提高网页的性能表现。
但是,有时需要从组件获取真实的DOM节点,这时就要用到ref
属性。
var MyComponent = React.createClass({
handleClick(){
this.refs.myTextInput.focus();
},
render(){
return (
<input type="text" ref="myTextInput" />
<input type="button" value="focus the Text input" onClick={this.handleClick} />
)
}
})
ReactDOM.render(
<MyComponent />,
document.getElementById("example")
)
上面代码中,组件MyComponent
的子节点有一个文本输入框,用于获取用户输入。这时就必须获取真实的DOM节点,虚拟DOM是拿不到用户输入的。为了做到这一点,文本输入框必须有一个ref
属性,然后this.refs.[refName]
就会返回这个真实的DOM节点。
需要注意的是,由于this.refs.[refName]
属性获取的是真实DOM,所以必须等到虚拟DOM插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定Click
事件的回调函数,确保了只有等到真实DOM发生Click
事件之后,才会读取this.refs.[refName]
属性。
React组件支持很多事件,除了Click
事件以外,还有keyDown
、Copy
、Scroll
等。完整的事件清单请查看官方文档。
React的PropTYpes的更多相关文章
- React 使用 PropTypes 进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. defaultProps 用来确保 this.props.name 在父组件没有特 ...
- React组件proptypes, ref
一.使用props.children访问嵌套数据 import React from 'react'; class Button extends React.Component { render () ...
- react中prop-types的使用
什么是prop-types?prop代表父组件传递过来的值,types代表类型.简单来说就是用来校验父组件传递过来值的类型 import PropTypes from 'prop-types'; To ...
- react中PropTypes与DefaultProps的应用
每个组件都有自己的props参数,这参数是从父组件接收的一些属性,那么如何对参数的类型作校验.如何定义参数的默认值.这里涉及到两个基础的概念,叫做proptypes 和 defaultprops.子组 ...
- react Props 验证 propTypes,
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- 正式学习React(五) Reactjs 的 PropTypes 使用方法
propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- React Native 系列(六) -- PropTypes
前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...
随机推荐
- pytong下安装安装SK-Learn
安装SK-Learn需要依赖的Python安装包有: Python (>= 2.6), NumPy (>= 1.3), SciPy (>= 0.7), 下载python的各种包的地址 ...
- 9-MySQL高级-主从同步时Slave_IO_Running:Connecting ; Slave_SQL_Running:Yes的情况故障排除
推荐!! 各种情况都考虑在内,条理清楚!! https://blog.csdn.net/mbytes/article/details/86711508
- uoj140 【UER #4】被粉碎的数字
题目 看起来就像是数位\(\rm dp\) 不妨从竖式乘法的角度来考虑这个问题 为了方便处理进位,我们得从低位向高位填数 设\(dp[i][0/1][j][p][t]\)表示填到了第\(i\)位,卡不 ...
- Jmeter压测快速体验
前言 最近在看neo4j相关的官网文档以及一些调优参数,同时也学了下Jmeter,为了测试下neo4j服务的性能,虽然不是专业搞测试的,但是我觉得每个优秀的开发者都应该学会主动压测自己服务和代码的性能 ...
- Apache Spark 2.2.0 中文文档 - Spark Streaming 编程指南
Spark Streaming 编程指南 概述 一个入门示例 基础概念 依赖 初始化 StreamingContext Discretized Streams (DStreams)(离散化流) Inp ...
- js倒计时在移动端的应用
在移动端测试倒计时,将时间转化为毫秒会在苹果手机上出现NaN ``` //在安卓上这样写可以获取到的 var date = '2017-06-12 13:12:13'; var time = new ...
- Face-Resources
Face-Resources Following is a growing list of some of the materials I found on the web for research ...
- 在egg.js中使用mongodb
1.egg.js官网只推荐了mysqle,要用mongodb得另找资料.通过查找,大家都在用Mongoose连接,于是乎学习. 网站链接:https://www.npmjs.com/package/e ...
- oracle将查询结果横转纵
SELECT '残疾人|民政|综合治理|计划生育|物业监管|安全生产|环境类|司法信访|党建|社会组织|文化体育|社保' D , '53|52|51|50|49|48|47|5|4|3|2|1' g ...
- org.apache.ibatis.binding.BindingException: Parameter 'xxx' not found. Available parameters are [arg1, arg0, param1, param2]
这个异常说明参数没有加上@Param注解,加上这个注解就行了. 默认情况下mybatis把参数按顺序转化为[0, 1, param1, param2],也就是说#{0} 和 #{param1} 是一样 ...