我有一个数组,我希望能够将其划分为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/

10-12 00:19
查看更多