时间戳

首页 > 解决方案 > 做出反应。在另一个地图中运行 .map 或 .filter

reactjs - 做出反应。在另一个地图中运行 .map 或 .filter

问题描述

您如何在另一个地图中运行地图或过滤器？我有一些带有菜单的 Json。如果我的第一级有任何孩子，我想循环真实的 Json 和 se。如果他们有孩子，则返回引导下拉菜单，如果没有则返回普通按钮。如果有的话，然后循环所有孩子。. . . . . . . . . . . . . . . .

import React from 'react';

// MockData
var MockData = [
    {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1"
}, {
    "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
}, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
}, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
}, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
}, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1"
}, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
}, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
}, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
}, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
}, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
}, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
}, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
}, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
}, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
}, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
}, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12"
}]


export default class Test2 extends React.PureComponent {

  constructor(props) {
        super(props);

        this.state = {
      showSubMenu: []
        };
    }


  render() {

        var children = {};
    for (let obj of MockData) {
      if (!children.hasOwnProperty(obj.parentid)) {
        children[obj.parentid] = [obj.id];
      }
      else {
        children[obj.parentid].push(obj.id);
            }
    }

    const map_func = (firstLevel, index) => {
      if (children.hasOwnProperty(firstLevel.id)) {
        return <p><b>Dropdown / {firstLevel.text} / {firstLevel.parentid}</b></p>;
      } else {
        return <p>Button / {firstLevel.text} / {firstLevel.parentid}</p>;
          }
    };

    return (

      <div>
        {MockData.map(map_func)}
      </div>

    );  
  }

}

标签： reactjs

解决方案

你应该建立一个像这样的地图：

var children = {};
for (let obj of MockData) {
    if (!children.hasOwnProperty(obj.parentid)) {
        children[obj.parentid] = [obj.id];
    }
    else {
        children[obj.parentid].push(obj.id);
    }
}

现在您可以通过这种方式轻松检查您firstLevel是否至少有一个孩子：

if (children.hasOwnProperty(firstLevel.id)) {
    // bootstrap dropdown
} else {
    // normal button
}

children[firstLevel.id]如果有的话，孩子的身份证在里面

编辑：所以你的最终代码应该是这样的：

  render() {
    const map_func = (firstLevel, index) => {
      if (children.hasOwnProperty(firstLevel.id)) {
        // return bootstrap dropdown;
      } else {
        // return normal button;
      }
    };

    return (

      <div>
        {MockData.map(map_func)}
      </div>

        );  
    }

推荐阅读