React动态添加border

react

要求如下

应该能注意到这个边框不是单纯的加一个border就能行的。因为你没办法确定这个数组的大小,所以由数组map出来后的flex item就很难搞。

话不多说,直接上图

我的做法是,对每个item添加border-right和border-bottom,然后针对右边的用nth-of-type(4n)解决。而底部的却没办法,因为你确定不了他底部有几个。这里我的做法是动态的给li增加一个类,也就是这里的member-bottom。对这个.member-bottom去去除底部border。

如果能确定数量的话,比如说是个静态页面,就不要这样动态添加类了,比如说,如果你知道最底下是三个,就nth-last-of-type,123即可。

以上是 React动态添加border 的全部内容, 来源链接: utcz.com/z/381193.html

回到顶部