react中PropTypes与DefaultProps的应用

每个组件都有自己的props参数，这参数是从父组件接收的一些属性，那么如何对参数的类型作校验。如何定义参数的默认值。这里涉及到两个基础的概念，叫做proptypes 和 defaultprops。子组件要接收的类型是固定，父组件不能乱传。比如显示的是个字符串，父组件就不能传个函数过来，不然代码是有问题的。这是时候就要使用proptyps进行一个强校验。

 

使用proptypes，第一步就要引用proptypes。

import Proptyps from 'prop-types';
TodoItem.propTypes = {
　　content: Proptyps.string,
　　handleItemDelete: Proptyps.func,
　　index: Proptyps.number
}

一般开发的时候都建议把Proptyps写上去，这样传值不对的时候，就会有一个明显的警告。

 

如果在子组件写一个父组件传值中没有的参数，代码没有任何的错误，只不过参数没有接收，不会显示而已，这个时候对于没有传递的参数，是不会去做校验，如果这个参数是必须要的，可以强制去做校验，例如

import Proptyps from 'prop-types';
TodoItem.propTypes = {
　　test: Proptyps.string.isRequired
}

isRequired表示父组件必须要向子组件传递，不传递，会报警告。

 

有的时候子组件要求父组件必须要传这个test，但有时候父组件实在没办法传这个test.那么可以给test定义一个默认值。

import Proptyps from 'prop-types';
TodoItem.propTypes = {
　　test: Proptyps.string.isRequired
}
TodoItem.defaultProps = {
　　test: 'hello world'
}

这样就要求父组件必须传，不传就显示默认值。

 

假设现在我有个这样的需求，这个参数不仅可以是string类型，还可以是number类型。

import Proptyps from 'prop-types';
TodoItem.propTypes = {
　　content: Proptyps.oneOfType([Proptyps.string, Proptyps.number])
}

 

下面这个arrayOf表示content是个数组，数组里面的内容可以是string，也可以是number

import Proptyps from 'prop-types';
TodoItem.propTypes = {
　　content: Proptyps.arrayOf(Proptyps.string, Proptyps.number)
}