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()，因为它将元素附加到数组的末尾。

标签： javascriptarraysreactjs

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