react中prop-types的使用

什么是prop-types?prop代表父组件传递过来的值,types代表类型。简单来说就是用来校验父组件传递过来值的类型

1
2
3
4
import PropTypes from 'prop-types';
TodoItem.propTypes = {
test: PropTypes.string.isRequired, //加上isRequired以后,即使父组件没传递值也会抛出警告
}
1
2
3
4
5
import PropTypes from 'prop-types';
TodoItem.propTypes = {
test: PropTypes.arrayOf(PropTypes.string, PropTypes.number) //可以设置多个类型
test: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) //符合任意一个类型即可
}

那么如何解决父组件没传递值也会抛出的警告呢?可以使用react里的defaultProps来设置默认的props值

1
2
3
TodoItem.defaultProps = {
test: 'hello word'
}

还有想学习更多proptypes的同学请关注react文档https://reactjs.org/docs/typechecking-with-proptypes.html

大家学会了吗?

#

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×