Question

如何在另一个地图中运行地图或过滤器？我有一些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>

    );  
  }

}

Answer 1

您应该只构建一个像这样的地图：

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
}

如果有子代ID，则在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>

        );  
    }

反应在另一个地图中运行.map或.filter

1 个答案: