先来描述一下遇到的问题：
条件1:父组件A调用子组件B，并传入了一个数组，在组件B中需要根据组件A传过来的数组遍历出一个个li 标签，并且能够实现对li标签的多选。
条件2:项目引用的图标是基于iconfont实现的，为了统一规则，图标只能在js中引用，不可以在css中引用，所以在代码中会一次性引入两个icon，那么到底显示哪个呢？那就需要css来解决了。
先看一下 iconfont 中我需要的两个 icon
很明显，一个表示选中状态一个表示没有选中的状态，在代码中使用的规则如下：
刚刚说到，两个icon同时放到一个div中的话就会导致同时看到就会两个icon，这个时候div的className是一个变量“select”就是这里的关键，看一下select是如何设值的:
上面中的file就是数组的一个元素，刚开始的时候file没有isselected这个元素，也就是说file.isselected应该是等于undefined的，那么就是执行else语句，那么就应该是
然后在css里面进行布局设置：
1.如果没有选中，div的class就是select，那么就应该根据css的上半部分来显示，也就是显示.active的内容
2.如果选中，div的class就是 select active，会渲染上面的css，但是最终的效果还是下面的：显示alicon的内容，隐藏active的内容
这样就实现了他们之间的切换。
但是！！！
file.isselected这个值如何设置呢？
这个就需要通过state来实现了，给div绑定一个click事件：
这里只简单的说一下方法的思路，具体实现看上面的代码就可以了：
首先我们根据 点击的这个div绑定的file就可以获取到这个file的myid值（这里file是有这个值的，前面没交代清楚），然而 file 是属于allfilepackageList 数组中的某一个（请注意这里的某一个，我们现在还不知道具体是哪个），
我们就遍历allfilepackageList数组，然后将每一个值的myid和file的myid值进行比较，如果相等就是说明目前点击的就是这个file，那么它就被选中了（也有可能是被选中了或者取消选中），那么只需要将这个this.state.allfilepackageList【i】的isselected进行取反就可以了（如果原来被选中，就取消选中，设值为false；如果原来没有被选中，就选中，设值为true）
然后通过setState来重新渲染就可以实现了
写在最后面的话：
这篇文章是在实际项目中遇到的问题而“终结”出来的，说是终结还不如说是抄过来的，但是咱不怕。把别人的东西变成自己的东西那也是自己的是吧？
工作了半年之久，遇到了很多的问题，也很少总结。这篇所谓的总结也只是遇到问题、解决方法。然而没有更深入的理解里面的原理，甚至从始至终都没有看过源码。这是我自身一个很大的问题！
希望能找到好的方法总结学习，希望自己能够更勤奋！深挖，死究！努力提高自己的能力，变得强大！！！
戒躁！
网友评论