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 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

web前端零基础课-1012上周总结

类组件中的方法内部不绑定this,在方法内部使用this,需要用bind(this)传入

1052
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 标准构建

前言  通过《WebComponent魔法堂:深究Custom Element 之 面向痛点编程》,我们明白到其实Custom Element并不是什么新东西,...

20510
来自专栏技术墨客

React JSX语法与组件

上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JS...

2015
来自专栏ShaoYL

自定义View

2986
来自专栏达摩兵的技术空间

react-组件学习笔记

本文重点学习理解react组件部分,文档内容来源于react官网以及《react全栈》。本文内容仅针对react初学者,请大神略过,仅限于读书笔记与摘录。

753
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(下)

React Native之React速学教程(下) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

3195
来自专栏青玉伏案

iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看《iOS开发之窥探UICollec...

25910
来自专栏finleyMa

(转) 谈一谈创建React Component的几种方式

原文地址:http://www.cnblogs.com/Unknw/p/6431375.html

1032
来自专栏IMWeb前端团队

React组件生命周期

React组件生命周期 React的组件的生命周期分为三个过程: 装载过程(Mount):第一次把组件渲染到DOM树的过程; 更新过程(Update):组件进行...

2157
来自专栏keyWords

1、深入浅出React(一)

npm start启动开发环境,npm run build创建生产环境优化代码,npm test用于测试单元,npm run eject把潜藏在react-sc...

791

扫码关注云+社区

领取腾讯云代金券