reactjs - 在React中递归渲染深层嵌套数据

Question

我是 React 新手，我想在 sidenav 中渲染一个对象。我使用了 map 函数来循环访问该对象，但出现 map is not Defined 错误。为我提供渲染对象的完整 for 循环语法。

var side = ({
  "children": [
    {
      "children": [
        {
          "id": "b123a",
          "name": "compo"
        },
        {
          "id": "5a523",
          "name": "orient"
        },
        {
          "id": "42e7e",
          "name": "build"
        }
      ],
      "id": "f9ca7",
      "name": "building"
    },
    {
      "children": [
        {
          "id": "dbd4",
          "name": "insula"
        },
        {
          "id": "ad8404",
          "name": "fenest"
        },
        {
          "id": "e3837",
          "name": "window"
        }
      ],
      "id": "af776",
      "name": "envelope"
    },
    {
      "children": [
        {
          "id": "ba515",
          "name": "heating"
        },
        {
          "id": "6618",
          "name": "cooling"
        },
        {
          "id": "4a0547b8f",
          "name": "water_heating_system"
        }
      ],
      "id": "3e967",
      "name": "systems"
    },
    {
      "id": "e7c6e",
      "name": "spatial"
    },
    {
      "id": "9f641",
      "name": "design"
    }
  ],
  "name": "root"
})

我的html代码是

<li>
                <a className="sidenav-title" href="#"><img src="/assets/img/primary/cube.png" style={{width: '20px',marginRight:'10px'}} />
                  <span>Building Form</span>
                </a>
                <a className="collapsible-header arrow-r">
                  <i className="fa fa-angle-down rotate-icon"></i>
                </a>
                <div className="collapsible-body">
                  <ul className="">
                    <li><a href="#" className="">Orientation</a></li>
                    <li><a href="#" className="">Volume</a></li>
                    <li className="li_hover_dropdown">
                      <div className="dropright posti-rel">
                        <a className="sidenav-title1 " href="#">Components</a>
                        <a className="nav-link arrow-r" href="#" style={{padding:'0px'}} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <i className="fa fa-angle-right" style={{marginLeft: '25px'}}></i>
                        </a>
                        <div className="dropdown-menu sidenav-side">
                          <a style={{height:'0px'}}></a>
                          <a className="dropdown-item" href="#">Wall Type</a>
                          <a className="dropdown-item" href="#">Roof Type</a>
                          <a className="dropdown-item" href="#">Substructure Type</a>
                        </div>
                      </div>
                    </li>
                  <li><a href="#" className="">Glazing Size</a></li>
                  <li><a href="#" className=" fadein-color" style={{color:'rgba(0,0,0,34%)!important'}}>Shading Design</a></li>
                </ul>
              </div>
            </li>

在我的侧导航中，我使用三种类型的菜单。第一个父菜单处于普通 View 中，第二个子菜单位于向下打开的下拉菜单中，第三个菜单是向右打开的下拉菜单。

Answer 1

您需要递归地渲染数据。在最初的顶层渲染对象是这样的

const side = {
  "children": [
    {
      "children": [
        {
          "id": "b123a",
          "name": "compo"
        },
        {
          "id": "5a523",
          "name": "orient"
        },
        {
          "id": "42e7e",
          "name": "build"
        }
      ],
      "id": "f9ca7",
      "name": "building"
    },
    {
      "children": [
        {
          "id": "dbd4",
          "name": "insula"
        },
        {
          "id": "ad8404",
          "name": "fenest"
        },
        {
          "id": "e3837",
          "name": "window"
        }
      ],
      "id": "af776",
      "name": "envelope"
    },
    {
      "children": [
        {
          "id": "ba515",
          "name": "heating"
        },
        {
          "id": "6618",
          "name": "cooling"
        },
        {
          "id": "4a0547b8f",
          "name": "water_heating_system"
        }
      ],
      "id": "3e967",
      "name": "systems"
    },
    {
      "id": "e7c6e",
      "name": "spatial"
    },
    {
      "id": "9f641",
      "name": "design"
    }
  ],
  "name": "root"
}

const SideMenu = ({data}) => {
  if(!data) {
      return null;
  }
  return (
    <ul>
      {
      Array.isArray(data)? data.map(item => {
        return (<li>
          {item.name}
          {item.children && <SideMenu data={item.children} />}
        </li>);
      }): <li>
          {data.name}
          {data.children && <SideMenu data={data.children} />}
        </li>
      }
    </ul>
  );
}

ReactDOM.render(<SideMenu data={side} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>