数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在React.js中使用propTypes
使用propTypes可以确保组件接收props的类型安全，并有助于进行正确的计算。
示例 - 如果我们接收name作为字符串，age作为数字，那么应该以相同的类型接收。如果我们以字符串形式接收age，则可能导致计算错误。
要使用propTypes，我们必须安装以下软件包。
npm install –save prop-types
此软件包由React团队提供。要在组件上使用它，我们将首先导入它。
import PropType from ‘prop-types’;
我们可以在任何类型的组件（有状态或无状态）上使用它。
在导出组件之前，在组件的末尾，我们这样写：
Player.propTypes={};
Note the propType on name of component as shown above.
Player.propTypes={
age:PropType.number,
name:PropType.string
}使用JavaScript对象，我们指定prop的名称及其有效数据类型。如果我们传递不正确的数
可用的prop类型如下：
- any => 它可以是任何类型
- Boolean (布尔值)
- String (字符串)
- Number (数字)
- func => 表示函数
- array (数组)
- object (对象)
- symbol (符号)
如果prop类型不匹配，在浏览器控制台中显示警告消息将帮助开发人员纠正其错误。
虽然我们可以在每个组件上使用proptype，但是如果组件将被其他开发人员使用并且大量使用数据类型，则应该使用它。
使用Ref
我们可以通过使用ref来掌握dom元素来操作它。
<input value={this.props.name}
ref={(myInput)=>{this.testInput=myInput}}/>
we can use it on componentDidMount
componentDidMount(){
this.testInput.focus();
}使用Ref的另一种最新方法
Inside constructor we can create a ref
constructor(props){
super(props);
this.testInputRef=React.createRef();
}我们可以在输入元素上使用创建的ref，如下所示：
<input value={this.props.name}
ref={this.testInputRef }/>如何在componentDidMount中访问这种新方法
componentDidMount(){
this.testInputRef.current.focus();
}我们必须在ref元素上使用current才能使其工作。
这样，我们可以避免创建匿名函数来为输入创建引用。
使用hook在函数式组件中创建ref
We can create ref using useRef
import React, { useRef} from ‘react’;
const myFunction=(props)=>{
const inputRef = useRef(null);// we can give some value to ref using its constructor
}我们可以像之前在有状态组件中创建的那样使用ref。
请注意，此时不应立即使用此ref，因为jsx代码尚未准备好。
我们可以在useEffect内部使用ref元素。useEffect函数在jsx代码渲染后运行，因此我们可以确保ref变量已附加到实际元素并可以使用。
这些refs将像上面一样使用current关键字访问。
This.inputRef.current.click();
通过创建ref，我们正在组件中保留一个可变字段以便轻松处理它。
请注意，ref的更改不会触发重新渲染。有一个useCallback方法可以异步通知更改。
更新于：2019年9月4日
192 次浏览
广告