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的方式是创建一个 new 数组：

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);

Answer 2

您可以执行归约操作，以将Conjunction组件包含在FilterGroup组件之后：

filterGroups.reduce(function (acc, element, index, array){
    if(idx < array.length - 1) {
        return acc.concat([element, <Conjunction key={index + 1} />]);
    } else {
        return acc.concat([element])
    }
}, []);

但是我必须承认这看起来有些怪异，也许当您在创建filterGroups数组时在数据数组上进行迭代时，您可能想要这样做。

如何在ReactJS组件对象的数组中插入元素（在现有元素之间）

2 个答案: