本文介绍了在React中如何为无状态组件和类组件设置默认props值，以及如何进行props验证。通过defaultProps属性设置初始值，并通过prop-types库进行数据类型检查。在某些情况下，未压缩的prop-types库会导致控制台显示错误信息。
1无状态组件props验证与设置默认值
无状态组件props设置默认值
当我们没有给props设置要传的默认值时，不会报错，只是会出现一片空白，影响用户体验，如下例里，只是在接收的时候直接用的props接收，但在调用组件时并没有传初始值过去，所以页面上呈现一片空白。
无状态组件设置默认值，也就是要传的初始值，需要使用defaultProps属性，具体的设置方法就是当前组件名.defaultProps，当前react版本16，如果react版本在15之前那写法有些不同，看下例：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无状态组件里的props验证与默认值title> <script src="node_modules/react/umd/react.development.js">script> <script src="node_modules/react-dom/umd/react-dom.development.js">script> <script src="node_modules/babel-standalone/babel.min.js">script>head><body> <div id="demoReact">div> <script type="text/babel"> function Com(props) {
//无状态组件设置默认值需要使用defaultProps属性 return ( <div>我是一个无状态组件，外部传递的数据是：{props.name}div> ) } Com.defaultProps = {
name: "我是props中name的默认值" } //当前react版本是16,如果react版本是15x,那么这里设置默认值写法有些不同，用||的方式完成 // function Com(props) {
// props.name=props.name || "我是默认值" // return ( // 我是一个无状态组件，外部传递的数据是：{props.name}
// ) // } ReactDOM.render(<Com />, document.getElementById("demoReact"))script>body>html>
运行结果是
如果说进行数据的传递，传递给name一个值，那么就会发现name的默认初始值就会被传递的值替换，如下例：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无状态组件里的props验证与默认值title> <script src="node_modules/react/umd/react.development.js">script> <script src="node_modules/react-dom/umd/react-dom.dev
最低0.47元/天 解锁文章
扫一扫
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
