一个tab切换加select子选项的内容切换
在react项目开发中我们经常会遇到需要组件传参的场景,比如父组件向子组件传参,组件之间值的传递在组件开发中也显得十分方便,但在实际开发当中也会遇到一些问题,接下来我来描述一下我曾经遇到的一个问题(后来想想当时太蠢了)。
如上图所示,实际开发当中遇到了这样的一个场景,其实就是一个tab切换加select下拉框选项内容的联动。
当时在开发的时候需求是这样的,在选中tab1和tab3时,select下拉框的内容是aaa和bbb,在选中tab2时下拉框的选项是aaa,bbb,ccc,看起来很简单吧,其实就是很简单。
下拉框的option内容是父组件传递过来的,根据id设置默认选中项,当时遇到的问题是:在切换到tab2时,option选项内容没有发生改变(没有重新render),而且我在控制台里打印是可以拿到子组件的最新状态但是页面却没有更新,因为当时tab1-tab3都是需要默认选中aaa的,所以我在父组件中给它们传递了一样的id,所以在切换tab时子组件才没有更新,因为select默认选中的值是根据父组件传递过来的id来设置的,所以导致自己犯了一个非常低级的错误,没想到默认选中的值会影响到最终页面上渲染的option选项,本人开始的时候认为它们没有什么联系。。。
解决办法:子组件的select的默认选中值根据父组件传递过来的数据中的每一项的唯一标识去获取,即每一项的value值(不同的)就解决了。