javascript - 如何在 ReactJS 组件对象数组中插入元素(在现有元素之间)

Question

我有一个数组 <FilterGroup / > 对象。我想插入<Conjunction />每个 <FilterGroup> 之后的对象除最后一个之外的对象。

所以数组应该来自:

[
    <FilterGroup />
    <FilterGroup />
    <FilterGroup />
    <FilterGroup />
]

致:

[
    <FilterGroup />
    <Conjunction />  
    <FilterGroup />
    <Conjunction />
    <FilterGroup />
    <Conjunction />
    <FilterGroup />
]

到目前为止，我的尝试导致我:

filterGroups.filter(function(filterGroup, index) {
    if(index !== filterGroups.length-1){
        filterGroups.push(<Conjunction key={index} />);
    }
})

我需要替换push()因为它将元素附加到数组的末尾。

Answer 1

通常的类似 React 的方式是创建一个新数组:

const result = [];
for (const entry of original) {
    if (result.length > 0) {
        result.push("<Conjunction />");
    }
    result.push(entry);
}

使用字符串而不是元素的示例:

var original = [
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />"
];
const result = [];
for (const entry of original) {
    if (result.length > 0) {
        result.push("<Conjunction />");
    }
    result.push(entry);
}
console.log(result);

(是的，您可以将其放入 reduce 调用中，因为任何数组操作都可以放入 reduce 调用，但它不会给你带来任何东西。)

但是如果您想修改现有数组，则可以使用splice:

for (let i = theArray.length - 1; i > 0; --i) {
    theArray.splice(i, 0, "<Conjunction />");
}

使用字符串而不是元素的示例:

var theArray = [
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />",
    "<FilterGroup />"
];
for (let i = theArray.length - 1; i > 0; --i) {
    theArray.splice(i, 0, "<Conjunction />");
}
console.log(theArray);