酒店网站模板设计方案,免费做淘客cms网站,网站开发保密协议 doc,舆情网站网址原文链接
公众号-React中使用TypeScript代替prop-types
个人公众号#xff0c;呜呜呜#xff0c;求各位大佬们关注下#xff0c;本人的公众号主要写React 跟NodeJs的
关于prop-types
对于部分的同学#xff0c;不大了解为什么我们的代码里面要用到prop-types这个库呜呜呜求各位大佬们关注下本人的公众号主要写React 跟NodeJs的
关于prop-types
对于部分的同学不大了解为什么我们的代码里面要用到prop-types这个库对此需要先解释下这个库的历史。
很久很久以前React在出来的时候在对组件处理的时候对props进行了校验比如一个计算数字的子组件对props的要求是必须都为数字而如果传入的不是数字就很容易报错因此我们需要在组件内对props进行校验。
基于上述环境React对props进行了类型约束就如同现在的TS一样对每一个参数都规定了类型但是到后来的时候就觉得这个比较鸡肋也为了让React这个库没那么大所以就将其划分出来作为一个专属库名为prop-types
所以在prop-types的库中有了下面这么一个描述 PropTypes 最初是作为 React 核心模块的一部分公开的并且是 通常与 React 组件一起使用。 用法 既然现在prop-types已经是一个单独的库了那么我们就要将其安装到我们的项目中不过由于prop-types只在开发环境中奏效所以只需要install -D即可。
prop-types: ^15.8.1,ok在安装过了prop-types之后再将用法写在下面
import PropTypes from prop-types;
import { PureComponent } from react;
class CPropsComponent extends PureComponent {static PropTypes {propStr: PropTypes.string,propNum: PropTypes.number,};
render() {const { propStr, propNum } this.props;return (spanstr:{propStr}/spanbr /spannumber:{propNum}/spanbr //);}
}
export default CPropsComponent; 这样子当我们传入两个参数的时候就可以做出类型校验了。 但是呢大人现在已经是2023年了typescript已经不是加分项而是必须项了
Typescript的代替
前面提及到了prop-types的作用是为了校验我们的props的类型这样子我们就不得不提起一个牛逼的兄弟–Typescript。
我想大家都应该明白为啥一向严谨的我在写prop-types的时候连一个效果展示图都不补贴出来了吧。。因为实在没必要。
接下来贴上一段用Typescript代替的代码
interface PropComponentProps {propStr: string;propNum: number;
}
function PropsComponent(props: PropComponentProps) {const { propStr , propNum 0 } props;
return (spanstr:{propStr}/spanbr /spannumber:{propNum}/spanbr /spannumObj/span/);
}
export default PropsComponent; 简单明了。。
最后再贴上一份关于类组件的代码也只是设置了component的props类型而已请看第二行开始
import { PureComponent } from react;
class CPropsComponent extends PureComponent{propNum: number;propStr: string;
} {render() {const { propStr, propNum } this.props;return (spanstr:{propStr}/spanbr /spannumber:{propNum}/spanbr //);}
}
export default CPropsComponent;最后的叮嘱
其实从prop-types的库只有js就可以知道已经属于开始废弃了。
大人时代变了已经是属于TS的时代了。不信?React的文档是这么写的
我们建议使用 TypeScript 而不是在运行时检查 prop 类型。
