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图：

• 还可以验证一下数据类型：

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: "我是默认值"
}