标签:LTP exp 设置 ring dem his stat 不同 asc
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。
https://www.npmjs.com/package/prop-types npm官网 https://reactjs.org/docs/typechecking-with-proptypes.html react官方
//安装 npm install prop-types --save //引入 import PropTypes from ‘prop-types‘;
optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol,
import React, { Component } from ‘react‘ import PropTypes from ‘prop-types‘; //子组件 class Children extends Component { //如果没有传递该属性时的默认值 static defaultProps = { //写class里面就用static 如果是外面就是下面的写法 name: ‘default‘ } static propTypes = { //如果传递该属性,该属性值必须为字符串 name: PropTypes.string } render() { return ( <div> {this.props.name} </div> ) } } //如果没有传递该属性时的默认值 // Children.defaultProps = { // name: ‘default‘ // } // Children.propTypes = { // //如果传递该属性,该属性值必须为字符串 // name: PropTypes.string.isRequired // } //父组件 export default class Home extends Component { render() { return ( <div> <Children/> Home </div> ) } }
static propTypes={ name:PropTypes.string.isRequired }
optionalArrayOf: PropTypes.arrayOf(PropTypes.number), optionalObjectOf: PropTypes.objectOf(PropTypes.number), //示例 static propTypes = { todoList:PropTypes.arrayOf(PropTypes.shape({ id:PropTypes.string.isRequired, text:PropTypes.string })) }
optionalObjectWithShape: PropTypes.shape({ optionalProperty: PropTypes.string, requiredProperty: PropTypes.number.isRequired }), //示例 static propTypes = { object:PropTypes.shape({ name:PropTypes.string, age:PropTypes.number }) }
标签:LTP exp 设置 ring dem his stat 不同 asc
原文地址:https://www.cnblogs.com/yetiezhu/p/12813271.html