如何在ReactDom遍历后插入分隔符

开发了一年的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;
}

请注意，一定是从后往前遍历，因为从前遍历的话，要插入的索引位会放生变化，因此逻辑比较复杂。
从后面往前遍历，那么前面元素的索引位不会发生变化，因此大大降低了逻辑复杂程度。

以上方案仅供参考，有更好的方案请留言探讨。