专栏首页Scott_Mr 个人专栏React Native 系列(六) -- PropTypes

React Native 系列(六) -- PropTypes

前言

本系列是基于React Native版本号0.44.3写的。在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现让其有提示呢?这篇文章将带领大家去认识一下PropTypes这个玩意。

PropTypes

  • 问题: 在自定义组件的时候,通常需要暴露属性出去,并且设置属性类型,外界在使用自定义组件的属性的时候,需要有自动提示属性功能。
  • 解决: 使用PropTypes
  • PropTypes用处:
    • 可以实现类型检查,当传入错误的属性值,会报警告,但是不会报错
    • PropTypes定义属性,外界使用的时候会有提示
  • 注意点:
    • PropTypes必须要用static声明,否则无效果
    • PropTypes只能用于React框架的自定义组件,默认JS是没有的,因为它是React框架中的。
  • static:用来定义类方法或者类属性,定义类的方法和属性,生成的对象就自动有这样的属性了。

PropTypes的使用

  • PropTypes:属性检测,使用的时候需要先导入,在React框架中
import React, { Component, PropTypes } from 'react';
  • 使用

在自定义组件添加如下代码:

static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number
}
  • 效果:

属性类型

// 数组类型
PropTypes.array

// 布尔类型
PropTypes.bool

// 函数类型
PropTypes.func

// 数值类型
PropTypes.number

// 对象类型
PropTypes.object

// 字符串类型
PropTypes.string

// 规定prop为必传字段
PropTypes.(类型).isRequired

// prop为任意类型
PropTypes.any.isRequired

给自定义属性设置初始值

  • 如果想要给自定义属性添加默认初始值,需要使用defaultProps
  • 注意:也是需要用static修饰
static defaultProps = {
    name: 'scottDefault',
    age: 12
}

实战演练

class ScottComponent extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

    static defaultProps = {
        name: 'scottDefault',
        age: 12
    }

    render(){
        return (
            <View style={styles.scottStyle}>
                <Text>组件名字:{this.props.name}</Text>
                <Text>组件年龄:{this.props.age}</Text>
            </View>
        );
    }
}

// 主组件
export default class RNDemoOne extends Component {
  render() {
    return (
        <View style={styles.container}>
            <ScottComponent/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    scottStyle: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
});

致谢

如果发现有错误的地方,欢迎各位指出,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两个imageView实现图片轮播

    Scott_Mr
  • 两个imageView实现图片轮播

    Scott_Mr
  • React Native 系列(八) -- 导航

    Scott_Mr
  • [OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查

    随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。对于某些应用程序来说,你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来...

    landv
  • 脑子瓦特?记忆力受损?试试AI调控的闭环电击颞叶疗法

    Root 编译整理 量子位 出品 | 公众号 QbitAI 发际线后退就算了。 发现自己连记忆力也开始下降? 你可能需要电电自己的脑子了。 2月6号,宾大研究团...

    量子位
  • salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取。salesforce 零基础学习(二十四)...

    用户1169343
  • (十七) 初遇python甚是喜爱之pip包管理工具使用

    各位读者大大们大家好,今天学习python的pip包管理工具,并记录学习过程欢迎大家一起交流分享。

    亚乐记
  • 禁止政府合同方使用华为、海康、大华、中兴、海能达产品或服务,特朗普政府拟本周敲定新禁令

    据路透社报道,一项新规将在本周内敲定,主要内容为:任何在日常运营中使用这五家公司的设备或服务的公司,在未获得美国政府豁免的情况下,将不能再向美国政府出售产品。

    机器之心
  • 《手把手带你学爬虫──初级篇》第1课 基础知识

    平时能接触到的操作系统非Windows、macOS、Linux莫属。其中Windows是我们日常中最常用的OS,它软件更多、办公和游戏可以兼得;macOS由于搭...

    GitOPEN
  • pycharm报python package tools not found错误

    使用pycharm开发,本机是ArchLinux,安装有python2.7, python3.7两个版本

    斯武丶风晴

扫码关注云+社区

领取腾讯云代金券