react 之 prop-types

原文地址

在开发过程当中，经常会用到Prop的type校验，但是React.PropTypes和React.createClass这两个功能在React 15.5之后版本被废弃了，所以从15.5版本开始，须要引入prop-types包来使用props校验。

使用步骤

安装prop-types第三方包

yarn add prop-types  //yarn
npm install prop-types  //npm

导入

import PropTypes from 'prop-types' //ES6语法

使用

组件.propTypes = {propName: PropTypes.约束
}
//例
App.propTypes = {colors: PropTypes.array
}

常见的约束规则

常用类型

  PropTypes.array //数组PropTypes.bool  //布尔PropTypes.func  //函数PropTypes.object  //对象PropTypes.number  //数值PropTypes.string  //字符串PropTypes.symbol  //SymbolPropTypes.element  //React元素

必填项：isRequired—在类型后面添加

App.propTypes = {colors: PropTypes.array.isRequired
}
//限制colors为数组类型，且必需

仅限制必要：any.isRequired

App.propTypes = {colors: PropTypes.any.isRequired
}
//限制colors类型随意，但必需

多可选类型：oneOfType([])

App.propTypes = {colors: PropTypes.oneOfType([PropType.string,PropType.number])
}
//该方法接受一个数组参数，数组内容为允许通过的类型

多可选值：oneOf([])

App.propTypes = {colors: PropTypes.oneOf(['red', 'blue'])
}
//colors的值只能从red和blue中选择一个

特定的结构对象：shape({})

App.propTypes = {people: PropTypes.shape({name: PropTypes.string.isRequired,id: PropTypes.number.isRequired})
}
//例如：people = {name: 'zhangsan', id: 123} 满足校验

小例

//Home.jsx
import React from "react";
import PropTypes from 'prop-types';function Home(props) {return (<div><span>{props.value}</span><button onClick={props.increaseValue}>+</button></div>)
}Home.propTypes = {value: PropTypes.number.isRequired,increaseValue: PropTypes.func.isRequired
}export default Home

//App.jsx
import React from "react";
import Home from "./Component/Home";function App() {return (<div className="App"><Home value={0} increaseValue={()=>{}}/></div>);
}export default App;

ps:

一旦设置props校验，就必须按照规定，那怕如上例所写传入一个函数的壳子。

Home.propTypes = {//这里是propTypes, 首字母p不能大写，否则会出现如下错误。value: PropTypes.number.isRequired,increaseValue: PropTypes.func.isRequired
}

Failed to compile.src\Component\Home\index.jsxLine 12:6:  Typo in static class property declaration  react/no-typosSearch for the keywords to learn more about each error.

注：本博客仅供个人学习，如有错误、侵权敬请指出。

react 之 prop-types相关推荐

vue使用slot分发内容与react使用prop分发内容
vue 将 <slot> 元素作为承载分发内容的出口 // layout.vue <div class="container"><main>&l ...
如何使用Webpack 4简化React.js开发过程
by Margarita Obraztsova 玛格丽塔(Margarita Obraztsova) 如何使用Webpack 4简化React.js开发过程 (How to streamline yo ...
我如何使用React和Typescript在freeCodeCamp中构建天气应用
by Kelvin Mai 通过凯文麦我如何使用React和Typescript在freeCodeCamp中构建天气应用 (How I built the weather app in freeCo ...
把这304道React的面试题刷完，前端面试没有在怕的！
Core React 什么是 React? React 是一个开源前端 JavaScript 库,用于构建用户界面,尤其是单页应用程序.它用于处理网页和移动应用程序的视图层.React 是由 Face ...
React 面试题回答
原文https://github.com/semlinker/reactjs-interview-questions 本项目的面试题来源于 sudheerj/reactjs-interview-que ...
react 与 Vue的一些比较
原文地址组件开发特性对比众所周知,Vue和React都有那么一个特性,那就是可以让我们进行组件化开发,这样可以让代码得到更好的重用以及解耦,在架构定位中这个应该叫纵向分层吧.但是,两个框架开发组 ...
撰写本文的所有基本React.js概念
Update: This article is now part of my book "React.js Beyond The Basics". 更新:本文现在是我的书<超 ...
一文详解 React 组件类型
本文的目标是让开发者清晰地了解 React 组件类型,哪些在现代 React 应用中依然在使用,以及为何一些类型现在不再使用了. 作者 | Robin Wieruch 译者 | 弯月责编 | 屠敏 ...
React 生命周期
生命周期方法组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数 ...
React-从0到1搭建一个React项目（一）
文章目录架构介绍第三方组件库项目准备环境准备使用create-react-app初始化项目创建项目目录结构安装第三方库利用工作之余的时间学习了react,今年一回来,部门要在公众号上面 ...

react 之 prop-types

react 之 prop-types

使用步骤

小例

react 之 prop-types相关推荐

最新文章

热门文章