先來描述一下遇到的問題：

條件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來重新渲染就可以實現了

寫在最后面的話：

這篇文章是在實際項目中遇到的問題而“終結”出來的，說是終結還不如說是抄過來的，但是咱不怕。把別人的東西變成自己的東西那也是自己的是吧？

工作了半年之久，遇到了很多的問題，也很少總結。這篇所謂的總結也只是遇到問題、解決方法。然而沒有更深入的理解里面的原理，甚至從始至終都沒有看過源碼。這是我自身一個很大的問題！

希望能找到好的方法總結學習，希望自己能夠更勤奮！深挖，死究！努力提高自己的能力，變得強大！??！

戒躁！