Javascript 将js数组分成两个组件_Javascript_Arrays_Reactjs

Javascript 将js数组分成两个组件

javascript arrays reactjs

Javascript 将js数组分成两个组件,javascript,arrays,reactjs,Javascript,Arrays,Reactjs,我有一个数组，我想把它分成两个部分，就像前5个元素放在一个元素里，剩下的都放在第二个元素里。我知道我必须使用slice，我可以得到第一个组件，但不确定第二个组件我有这样的想法： if (item.children) { return item.children.slice(0, 5).map((childItem) => { const navItem = ( <Link activeClassName={styles.active} to={childIt

我有一个数组，我想把它分成两个部分，就像前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>
    )
  })
}

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

if（item.children）{
返回item.children.slice（0,5）.map（（childItem）=>{
常数navItem=(
{childItem.text}
)
返回(

{navItem}

)
})
}

那么我如何让另一个组件出现在后面，比如

<li key={childItem.id}>
   {navItem}
</li>
{navExtra}


{navItem}

{navExtra}

包含数组中所有剩余元素的

最终的html应该如下所示：

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

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








额外的

当您使用splice时，它会改变原始数组，基本上将item.children留给您想要包含在

navExtra中的所有元素
我们可以创建一个返回对象，分别保存navItems
和navExtra
，以便您单独渲染，并在渲染中添加包装
，等等
if (item.children) {
  let ret = {
    navItems: [],
    navExtra: []
  };
  navItems = item.children.splice(0, 5);

  ret.navItems.push(
    navItems.map(navItem => {
      return (
        <li key={navItem.id}>
          <Link activeClassName={styles.active} to={navItem.url}>{navItem.text}</Link>
        </li>
      )
    })
  )

  ret.navExtra.push(
    item.children.map(navExtra => {
      <li key={navExtra.id}>
         <Link activeClassName={styles.active} to={navExtra.url}>{navExtra.text}</Link>
      </li>
    })
  )
}

if（item.children）{
让ret={
navItems:[]，
导航额外：[]
};
navItems=item.children.splice（0,5）；
后推(
navItems.map（navItem=>{
返回(

{navItem.text}

)
})
)
反向导航额外推力(
item.children.map（navExtra=>{

{navExtra.text}

})
)
}
变量确实有助于代码的可读性<代码>切片（beginIndex，endIndex）

和

切片（begin）

是键

您已经知道

切片（0,5）

将获得数组的前半部分

var x=slice（5）

将获取从第五个元素到最后的数组组件。您可以调用

map（）

并对这些元素执行任何其他处理，以获得要显示的内容

您可以使用

appendChild

创建HTML元素。下面是一个示例，说明了如何完成您正在尝试的任务：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
</div>

<script>
var array = ["this", "is", "a", "random", "array", "that", "i", "just", "made"];
var splitBy = Math.round(array.length / 2);

//for first half
for (var i = 0; i <= splitBy; i++){
    var li = document.createElement("li");
    var node = document.createTextNode(array[i]);
    li.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(li);
}
//for second half
for (var i = splitBy + 1; i < array.length; i++){
    var li = document.createElement("li");
    var node = document.createTextNode(array[i]);
    li.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(li);
}
</script>

</body>
</html>


var array=[“this”、“is”、“a”、“random”、“array”、“that”、“i”、“just”、“made”]；
var splitBy=Math.round（array.length/2）；
//上半场
对于（var i=0；我请清楚地描述您的问题&detailed.OP正在使用React，所以他们不会希望手动将元素直接附加到DOM。哦，好的。我应该删除我的答案吗？好的，但我认为这不符合我的要求，因为我已经在渲染数组的第一部分了……我想做的是得到剩下的任何内容啊-没问题。新组件名为/看起来是什么样的？再看一次您的示例，我猜这就是navExtra
分配给的内容？那么您可以告诉我如何创建它（例如，您传入的道具以及它们的值引用的位置）？是的，所以问题是如何在navExtra中呈现数组的其余元素，这将是一个不同的列表元素。所以我不知道如何做到这一点，这就是为什么我的代码段中没有我更新的代码，以反映我认为您正在尝试实现的目标