代码之家 › 专栏 › 技术社区 › systemdebt

如果react中的项超过n个元素,则拆分列表

reactjs

systemdebt · 技术社区 · 7 年前

我正在使用ReactJS在我们的Web应用程序上呈现格式正确的菜单:

如果元素数超过n(在我的例子中是20),如何停止呈现列表并从开始处开始?

   <div className="dropdown-menu-inner">
{
    item.children ? item.children.map(function (childitem, childindex) {
        return childitem.children ?
            <div id="col_sub_1">
                <ul className="col-lg-3 sub-menu-width">
                    {
                        childitem.id == '39' ?
                            <div class="vl"></div> : <div>{item.name}</div>
                    }
                    <span>{
                        <li className="visible-lg-block">
                            <a ><span>{childitem.name}</span>
                            </a>
                        </li>
                    }

                        {
                            childitem.children.map(function (leaf, leafindex) {
                                return <li className="visible-lg-block">
                                    <a href={leaf.url}><span>{leaf.name}</span>
                                    </a>
                                </li>

                            })}</span></ul></div>
            : <li className="visible-lg-block">
                <a href={item.url}><span>{childitem.name}</span>
                </a>
            </li>
    }) : null
}{
    item.images_array ? item.images_array.map(function (image, ind) {
        return <div className="col-sm-6 col-lg-9 hidden-xs hidden-sm hidden-md">
            <a className="event_menu_item_desktop" href={image.url}>
                <img alt={item.name} className="img-responsive" src={image.src} />
            </a>
        </div>
    }) : null
}

我需要做的是,在迭代叶元素时,将列表项的数量限制为20,如果超过20个元素,则从顶部呈现列表。

样本数据:

    {
      "data": {
        "desktop_web_menu": [
    {
            "category_id": 0,
            "children": [
              {
                "category_id": 1000,
                "children": [
                  {
                    "category_id": 604,
                    "id": 5,
                    "image_tag": null,
                    "images_array": [
                      {
                        "src": "/abc/",
                        "url": ""
                      }
                    ],
                    "name": "Back To School",
                    "parent_id": 4,
                    "position": 103,
                    "thumbnail": "abc,jpg",
                    "url": "/abc/"
                  },
                  {
                    "category_id": 607,
                    "id": 6,
                    "image_tag": null,
                    "images_array": [
                      {
                        "src": "zfd",
                        "url": ""
                      }
                    ],
                    "name": "Edgy Edit",
                    "parent_id": 4,
                    "position": 104,
                    "thumbnail": "edit.jpg",
                    "url": "ghvm/"
                  },
                  {
                    "category_id": 697,
                    "id": 7,
                    "image_tag": null,
                    "images_array": [
                      {
                        "src": "vhjk",
                        "url": ""
                      }
                    ],
                    "name": "Colour of the Month: Blue",
                    "parent_id": 4,
                    "position": 105,
                    "thumbnail": "/color.jpg",
                    "url": "/blueyi-collection/"
                  },
                  {
                    "category_id": 725,
                    "id": 8,
                    "image_tag": null,
                    "images_array": null,
                    "name": "Collection",
                    "parent_id": 4,
                    "position": 106,
                    "thumbnail": "/collection.jpg",
                    "url": "collection/"
                  }]}}

1 回复 | 直到 7 年前

Chris 7 年前

通过使用 slice() :

item.children.slice(0, 20).map(function (childitem, childindex) {
...

这个 切片() 方法,返回一个新数组(您的子集),这意味着您可以使用 map() 直接在结果上。