Question

我正在使用ReactJS在我们的网络应用上呈现格式正确的菜单：

如果元素数超过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/"
                  }]}}

Answer 1

您可以使用slice()创建集合的子集：

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

slice()方法将返回一个新数组（您的子集），这意味着您可以直接在结果上使用map()。

如果反应中的元素数大于n，则拆分列表

1 个答案: