react proptypes

prop-types 是用来约束 react 传参

不加约束穿数字类型的时候会被视为 String 类型出现奇奇怪怪的东西

函数约束

导入 import PropType from 'prop-types'

函数的默认值，不设置初始化会报错

News.defaultProps = {age: 10,
}

函数的类型约束

News.propTypes = {age: PropType.number.isRequired,
}

import React, {useState} from "react";
import  PropType from  'prop-types'
import Textconst from "../../Textcontext/textcontext";
import {Link, useNavigate, useRoutes} from "react-router-dom";
import router from "../../router/router";
import {gou} from "../../App";
// export  default  class News extends React.Component{
//     render() {
//         return <div >新闻</div>
//     }
// }
export default function News (props)  {return (<div> 数据参数</div>);
}
News.defaultProps = {age: 10,
}
News.propTypes = {age: PropType.number.isRequired,
}

类组件约束

static 会在类组件本身加载并不会被继承走

static propTypes  = {age: PropType.number
}
// 如果传递过来 proptype会拿着默认值去渲染
static defaultProps  = {age: 10
}


import  {Table} from "antd";
import  PropType from  'prop-types'
import React, {Component, createContext} from 'react'
import  { login } from '../api/shoop'
const {Provider,Consumer}   = React.createContext();class Shoop extends  Component{state = {age:20,dataSource :[{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号',},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号',},],columns:[{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},]}//限制传值或者必传必须传值方式static propTypes  = {age: PropType.number}// 如果传递过来 proptype会拿着默认值去渲染static defaultProps  = {age: 10}changeValue = () => {this.setState({age:100})}getvalue = () => {login().then((res) => {console.log(res,"dfkdjkfgdjgfjghfjghfjghfgjhfjghfkhgfjdghfhgjfhgfjghfjghfghjghfgh")})}// 组件创建的时候componentDidMount() {console.log("组件创建")this.getvalue()}shouldComponentUpdate(nextProps, nextState, nextContext) {console.log(nextProps)console.log(nextState)console.log(nextContext)return true}// 组件渲染的时候出触发componentDidUpdate(prevProps, prevState, snapshot) {console.log(this.props,"组件渲染的时候出触发")console.log(prevProps,"上次的props状态")console.log(prevState,"上次的props状态")console.log(snapshot,"weihz")}// 组件卸载componentWillUnmount() {console.log("组件卸载了")}componentDidCatch(error, errorInfo) {}// 初始化constructor(props) {// 在初始化获取数据console.log("进入数据初始化")console.table(props)super(props);}// 渲染区域render(){return <div><button  onClick={this.changeValue}>点击改变数据</button><Provider value="pink">  <Table dataSource={this.state.dataSource} columns={this.state.columns} /> </Provider></div>}
}
export default  Shoop;

react proptypes相关推荐

React PropTypes 的使用
React PropTypes 的使用参考:https://react.docschina.org/docs/typechecking-with-proptypes.html 在所使用 PropTy ...
使用=React.PropTypes进行类型检测
使用PropTypes进行类型检测随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug. 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScrip ...
react+propTypes
React.createClass({propTypes: {// 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.PropTy ...
react prop-types的使用讲解
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,JS是自由的,但同时又有许多让人烦恼的地方.javascript 很多时候就是这么一个熊孩子,他很多时候并不会像Ç和java的 ...
react PropTypes与 DefaultProps
参考链接 https://reactjs.org/docs/typechecking-with-proptypes.html 引入 PropTypes from 'prop-types' 组件 ...
React模式：集中式PropTypes
通过集中化PropType避免重复自己 (Avoid repeating yourself by centralizing PropTypes) There are three popular way ...
react使用 PropTypes 和 getDefaultProps()
一定要写PropTypes,切莫为了省事而不写如果一个Props不是requied,一定在getDefaultProps中设置它 React.PropTypes主要用来验证组件接收到的props是否 ...
react 之 prop-types
react 之 prop-types 原文地址在开发过程当中,经常会用到Prop的type校验,但是React.PropTypes和React.createClass这两个功能在React 15.5 ...
如何使用验证 React 道具PropTypes
Props 和 PropTypes 是在 React 组件之间传递只读属性的重要机制. 我们可以使用 React props(属性的缩写)将数据从一个组件发送到另一个组件.如果一个组件接收到错误类型的 ...

react proptypes

react proptypes相关推荐

最新文章

热门文章