我有一个数组,我希望能够将其划分为2个组件,因此就像前5个元素进入一个元素,剩下的都进入第二个元素。我知道我必须使用slice,我可以获得第一个组件,但是不确定第二个组件。
我有这样的事情:
if (item.children) {
return item.children.slice(0, 5).map((childItem) => {
const navItem = (
<Link activeClassName={styles.active} to={childItem.url}>{childItem.text}</Link>
)
return (
<li key={childItem.id}>
{navItem}
</li>
)
})
}
所以我如何让另一个组件出现在
<li key={childItem.id}>
{navItem}
</li>
{navExtra}
包含数组中所有剩余的元素?
最终的html应该看起来像这样:
<ul>
<!-- // first five elements of the array -->
<li><a href="Item 1">Item 1</a></li>
<li><a href="Item 2">Item 2</a></li>
<li><a href="Item 3">Item 3</a></li>
<li><a href="Item 4">Item 4</a></li>
<li><a href="Item 5">Item 5</a></li>
<!-- // new component -->
<li>
<button>Extra</button>
<ul>
<!-- // remaning elements of the array -->
<li><a href="Item 6">Item 6</a></li>
<li><a href="Item 7">Item 7</a></li>
<!-- // etc -->
</ul>
</li>
</ul>
最佳答案
变量确实可以帮助您提高代码的可读性。 slice(beginIndex, endIndex)
和slice(begin)
是键。
您已经知道slice(0,5)
将获得数组的前半部分。var x = slice(5)
将使您从第五个元素到末尾的数组组成部分。您可以调用map()
并对这些元素进行任何其他处理,以显示某些内容。
MSDN docs for slice
关于javascript - 将js数组分为2个组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42545121/