react-bootstrap和动态菜单

Question

我是新来的反应者，并尝试借助一些JSON做动态菜单。但是我对2级有问题。难道没有更好的方法吗？ 我可以检查1级是否具有2级。因为如果没有任何第2级，我需要使用NavItem。如果有，我需要使用NavDropdown。

import React from 'react';
import { Link } from 'react-router-dom'

import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import './Style.css';
import Logo from '../Logo'

// MockData
var MockData = [
    {
            "text": "Donorsøgninge",
            "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": "Donorsæd",
            "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": "Bliv donor",
            "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"
    }, {
        "id": "18",
        "text": "Services",
        "parentid": "-1"    
    }, {
          "id": "19",
          "text": "Om os",
          "parentid": "-1"  
  }, {
        "id": "20",
        "text": "Info",
        "parentid": "-1"    
}]


export default class Test extends React.Component {

  constructor(props) {
        super(props);
        this.navId = '';

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


  render() {

    let showNavFirstlevel = MockData.filter(
      (firstLevel) => {
                this.navId = firstLevel.id; 
                return firstLevel.parentid === "-1";
      }
        )

    return (

      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
                      <Link to='/' className="navbar-brand"><Logo/></Link>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav>

          { showNavFirstlevel.map((firstLevel) => (
                    <NavDropdown eventKey={firstLevel.id} key={firstLevel.id} title={firstLevel.text} id="basic-nav-dropdown">
                          <Submenu navId={firstLevel.id}/>
                        </NavDropdown >
                    ))}

        </Nav>
      </Navbar>

        );  
    }

}





class Submenu extends React.Component {
  render() {

    let showNavSecondlevel = MockData.filter(
      (secondLevel) => {            
                return secondLevel.parentid === this.props.navId;
      }
    )

    return (

      <div>
              { showNavSecondlevel.map((secondLevel) => (
          <MenuItem key={secondLevel.id} eventKey={secondLevel.id}>{secondLevel.text}</MenuItem>
              ))}
      </div>
    )
  }
}