开发了一年的React,一直有一个问题困扰着我,我们都知道React支持数组map返回ReactDom进行遍历渲染,但是如果我希望在每个ReactDom中间插入一个分隔符,如何操作呢?首先想到到是用Array.join方法,不过join方法后返回到是一个字符串,这样React就办法正常渲染了。那么有什么其他方法呢?以下案例是一个表格的操作列,有很多操作按钮,目标是渲染所有按钮并且每个按钮中间用一个分隔符(Divider)来分隔。
btns => {
// 遍历数组生成一个ReactDom数组
btns = btns.map((it, idx) => (<Button key={idx}>{it.name}</Button>));
// 遍历数组插入分隔符 Divider为antd里的组件
for (let i = btns.length - 1; i > 0; i--) {
btns.splice(i, 0, <Divider type="vertical" />);
}
return btns;
}
请注意,一定是从后往前遍历,因为从前遍历的话,要插入的索引位会放生变化,因此逻辑比较复杂。
从后面往前遍历,那么前面元素的索引位不会发生变化,因此大大降低了逻辑复杂程度。
以上方案仅供参考,有更好的方案请留言探讨。