有关PropTypes的随笔

以下是简单返回按钮组件的代码，可以自由定义返回图标的颜色，大小，组件样式

import React, { Component } from 'react';

import { TouchableOpacity, Image, Platform, useColorScheme } from 'react-native';

import PropTypes from 'prop-types';

import { Actions } from 'react-native-router-flux';

import AntDesign from 'react-native-vector-icons/AntDesign';

// 简单返回按钮

const BackButton = (props) => {

const { onBackBtnClick, backIconColor, backIconSize, containerStyle = {} } = props;

return (

<TouchableOpacity

activeOpacity={0.5}

style={{ paddingHorizontal: 10, ...containerStyle }}

onPress={onBackBtnClick ? onBackBtnClick : Actions.pop}

<AntDesign

color={backIconColor ? backIconColor : '#111'}

size={backIconSize ? backIconSize : 22}

name={Platform.OS === 'ios' ? 'left' : 'arrowleft'}

</TouchableOpacity>

);

};

BackButton.propTypes = {

onBackBtnClick: PropTypes.func,

containerStyle: PropTypes.object,

backIconColor: PropTypes.any,

backIconSize: PropTypes.number,

};

export default BackButton;

其中用到了PropTypes这个第三方包。主要的作用是通过下面的写法对你的某一个组件的props中的变量进行类型检测。

但是我在想能不能不用，这里是否有必要？希望之后的代码中能让我有所思考。

Son.propTypes = {

optionalArray: PropTypes.array,//检测数组类型

optionalBool: PropTypes.bool,//检测布尔类型

optionalFunc: PropTypes.func,//检测函数（Function类型）

optionalNumber: PropTypes.number,//检测数字

optionalObject: PropTypes.object,//检测对象

optionalString: PropTypes.string,//检测字符串

optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型

}

在看了这篇文章后有一点点小小的思考，倘若如文章所说是为了在JS报错时避免不知道原因的情况，是否得不偿失，字段太多，在下面加那么几行固然能很好进行类型检测，避免不知原因的bug，但是有点浪费时间的说