浅谈React 一父子传值(二,旧版)

hello 大家周末好,又是一个无聊的周末没有什么比待在家里写代码和睡觉了 ,哈哈。上一篇文章中咱们说到了React父子组件之间的相互通信,这篇文章呐给大家补充一点知识点。一个项目中是一个团队来一起开发的一人负责一个模块,咱们怎么使自己写的模块代码更加牢固更加成熟呢?接下就是咱们今天的主题!!!

一:给参数设定类型(string , number , function 等等)

先引入ProTypes这个模块(哪个页面需要给参数设定类型就在哪个页面引入)
在这里插入图片描述

使用方法:
在这里插入图片描述
图中的Content是我页面定义的class ,userid父页面传来的参数key,ProTypes.string的意思就是规定userid这个参数只能是字符串类型,isRequired的意思是这个参数是必传的参数。

父页面传参:
在这里插入图片描述
刚刚咱们在Content里面设置了userid这个参数是string类型也是必传项咱们现在看看页面的效果
在这里插入图片描述
正常输出没有问题,下来咱们给userid传一个number类型看看

父页面传参:
在这里插入图片描述
效果:
在这里插入图片描述
抛出异常了但是还会输出,错误原因userid 应该是string类型,现在是number类型所以抛出异常。

二:参数设定默认值

参数设定默认值
在这里插入图片描述
userName是父页面参数的key,这里的key要和父页面的key保持一致
在这里插入图片描述
咱们先看一下就是父页面传了userName是什么样子
在这里插入图片描述
在这里插入图片描述
咱们现在试一下就是把父页面的userName参数删掉会不会使用默认的值呢?
在这里插入图片描述
在这里插入图片描述
这时候咱们设置的userName的默认值生效了,以上面二种情况来看如果父页面没有设置参数的话子页面会自动生效默认值,如果传参了会自动覆盖默认值。

三:父页面传参通过子页面传递到孙子页面(全家福)
父页面传递的参数子页面接受,子页面也可以通过key,value的形式来传递给孙子页面但是一个二个参数可以那么100个呢?咱们写100个key,value???想想都知道这样是不显示的,哈哈 咱们可以通过 { …this.props } 来把所有的参数都给孙子页面传递过去孙子页面也是通过this.props.key来接收
在这里插入图片描述

源码放到了 https://github.com/Liingot/react-demo

今天就到这里,祝大家周末愉快冬至快乐记得吃饺子呦 哈哈 溜了溜了 !!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章