react中数据验证(prop-type的使用)

prop-type的使用

在这里插入图片描述

  • 在父组件中传入了一个:title数据(title=“标题”)
import React from "react";
import ReactDom from 'react-dom'
import './styles/global.scss'
import PropsTypeDemo from "./components/PropsTypeDemo";


class Root extends React.Component{
     
  render() {
     
    return(
        <div className="app">
            <PropsTypeDemo title={
     "标题"} />
        </div>
    )
  }
}

ReactDom.render(
  <Root />,
  document.getElementById('root')
)
  • 然后在子组件中导入prop-types,通过【组件类名】.propTypes对数据类型进行验证。
import React from "react";
import propsType from "prop-types";

export default class PropsTypeDemo extends React.Component{
     
    render() {
     
        return(
            <div>{
     this.props.title}</div>
        )
    }
}

PropsTypeDemo.propTypes = {
     
    title: propsType.string //验证正确
    title: propsType.number //报错如图:1-1
}
  • 如果类型接收的数据类型不对,会一个警告!!!

1-1图:
react中数据验证(prop-type的使用)_第1张图片

  • 还可以验证一下数据类型:
title: propsType.number,
    title: propsType.string,
    title: propsType.array,
    title: propsType.bool,
    title: propsType.func,
    title: propsType.object,
    title: propsType.symbol
  • isRequired表示必选项,就是我们在父组件中必须传数据进来,否则报警告!!!
PropsTypeDemo.propTypes = {
     
    title: propsType.string.isRequired,
}
  1. 如果父组件没传数据,title的值为:“我是默认值”,
  2. 如果父组件传了数据,title的值为:“标题”
PropsTypeDemo.defaultProps = {
     
  title: "我是默认值"
}

你可能感兴趣的:(笔记)