React-高级教程完整版

本文详细介绍了React的高级特性,包括属性类型检测(PropTypes)、Refs与DOM交互以及不可控组件的应用。通过实例展示了如何使用PropTypes进行类型检查,如何利用Refs获取和操作DOM元素,以及如何处理不可控组件的表单提交。此外,文章还探讨了在React中使用Refs的合适场景和最佳实践。
摘要由CSDN通过智能技术生成

React 高级教程完整版

这标题可能有点不太贴切或符合内容,从官方上来区分这部分内容确实属于高级部分,只是由于个人原因,在后面的一些章节并没有记录在列。

也为了承接上一篇,因此勉强将标题定位:“React 高级教程完整版”

纯属针对个人学习记录成果,无他~~~

属性类型检测(Typechecking With PropTypes)

React 内置了一系列的类型那个检测功能,通过 Comp.propTypes 对象指定,比如:

Comp.propTypes = {
    name: React.PropTypes.string
};

经过上面的指定之后,如果传入的 name 为非字符串的,会报错。

看个小示例:

// props-type-checking.html

class TypeCheck extends React.Component {
   
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>incoming prop: {
  this.props.sayHello}</div>
        );
    }
}

// 类型检测在类外面指定
TypeCheck.propTypes = {
    sayHello: React.PropTypes.string
};

ReactDOM.render(
    <TypeCheck sayHello={
  11111} />,
    document.getElementById('root')
);

报错内容:

Warning: Failed prop type: Invalid prop sayHello of type number supplied to TypeCheck, expected string in TypeCheck

检测类型:

类型 属性
数组 React.PropTypes.array
Boolean值 React.PropTypes.bool
函数 React.PropTypes.func
数字 React.PropTypes.number
对象 React.PropTypes.object
字符串 React.PropTypes.string
符号 React.PropTypes.symbol
DOM元素 React.PropTypes.node
React元素 React.PropTypes.element
某一个类的实例 React.PropTypes.instanceOf(Message)
属性值限定在某一范围 React.PropTypes.oneOf([‘News’, ‘Photos’]),
多种类型的一种 React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
])
数组且限定数组成员类型 React.PropTypes.arrayOf(React.PropTypes.number)
对象且限定对象成员值类型 React.PropTypes.objectOf(React.PropTypes.number)
特定形状的对象 React.PropTypes.shape({
 color: React.PropTypes.string,
 fontSize: React.PropTypes.number
})

并且可以在上面的属性检测后面加上 isRequired 来指定该属性是否必须,不如指定了而没有传递该属性,则会报下面错误

Warning: Failed prop type: The prop sayHello is marked as required in TypeCheck, but its value is undefined in TypeCheck

如果直接使用 React.PropTypes.isRequired 也会报错:

Warning: Failed prop type: TypeCheck: prop type sayHello is invalid; it must be a function, usually from React.PropTypes. in TypeCheck

上面意思大概就是:sayHello 类型无效,必须是个函数,通常来自 React.PropTypes

PropTypes: ReactPropTypes,

会发现 ReactPropTypes 其实是个包含类型检测函数的对象

var ReactPropTypes = {
  array: createPrimitiveTypeChecker('array'),
  bool: createPrimitiveTypeChecker('boolean'),
  func: createPrimitiveTypeChecker('function'),
  number: createPrimitiveTypeChecker('number'),
  object: createPrimitiveTypeChecker('object'),
  string: createPrimitiveTypeChecker('string'),
  symbol: createPrimitiveTypeChecker('symbol'),

  any: createAnyTypeChecker(),
  arrayOf: createArrayOfTypeChecker,
  element: createElementTypeChecker(),
  instanceOf: createInstanceTypeChecker,
  node: createNodeChecker(),
  objectOf: createObjectOfTypeChecker,
  oneOf: createEnumTypeChecker,
  oneOfType: createUnionTypeChecker,
  shape: createShapeTypeChecker
};

从上面可知 ReactPropTypes 对象下是没有 isRequired 这个属性的,再往下看,会发现其实 isRequired 是挂接在上面的执行结果之后的,也就是说就算指定了 isRequired 也会线执行上面的类型检查,然后再去根据 isRequired 值去进一步检测是类型不对还是压根没有传这个属性;


function createChainableTypeChecker(validate) {
   

    // 省略 ......

  function checkType
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若叶岂知秋vip

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值