大家好,我是梅巴哥er
, 这里讲个小知识点: 参数的类型验证。
目的:
- 当父组件传过来的参数,不是我们需要的参数类型时,给出警告。
安装:
npm install prop-types
引入:
import PropTypes from 'prop-types'
语法:
static propTypes = { 参数名: PropTypes.数据类型}
案例:
import React, {
Component } from 'react'
import PropTypes from 'prop-types'
class Header extends Component {
// 检验父组件传过来的参数是否符合需要的类型
static propTypes = {
// 要求传过来的参数是字符串形式
// 不然就会给出警告(不是报错,是warning)
//这里的string表示 要求传过来的title参数需要是字符串类型
title: PropTypes.string
}
render() {
return (
<header>
{
this.props.title }
</header>
)
}
}
class App4 extends Component {
render() {
return (
<div>
{
/* 这个ttile是字符串类型的123, 没有警告*/}
<Header title='123' />
{
/* 这个ttile是数字类型的123, 有警告*/}
<Header title={
123 } />
</div>
)
}
}
export default App4