0

我想在 ReactJS 应用程序中使用 json 数据创建一个多级引导 4 导航。我有一个提供菜单结构的数据源，如下所示：

[
    {
        "name": "News",
        "url": "/news"
    },
    {.
        "name": "Events",
        "url": "/events"
    },
    {
        "name": "Get Involved",
        "url": "/get-involved",
        "child": [
            {
                "name": "Event Info",
                "url": "/event-info",
                "child": [
                    {
                        "name": "Forms & Resources",
                        "url": "/forms-resources"
                    }
                ]
            }
        ]
    },
    {
        "name": "Membership",
        "url": "/membership"
    },
    {
        "name": "About",
        "url": "/about"
    }
]

我需要将其转换为多层引导程序 4 导航，如下所示：

      <li class="nav-item"> <a class="nav-link" href="/news"> News </a> </li>
      <li class="nav-item"> <a class="nav-link" href="/events"> Events </a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="/get-involved"> Get Involved </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#"> Second level 1 </a></li>
          <li><a class="dropdown-item" href="/event-info"> Event Info </a>
            <ul class="submenu dropdown-menu">
              <li><a class="dropdown-item" href="/forms-resources"> Forms & Resources</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item"> <a class="nav-link" href="/membership"> Membership </a> </li>
      <li class="nav-item"> <a class="nav-link" href="/about"> About </a></li>

这是针对我在 ReactJS 中构建的应用程序

4

3 回答 3

1 
function makeNavItems(items, dropdown = false) {
    return items.map(({ name, url, child }) => {
        const liClass = dropdown ? 'dropdown-item' : 'nav-item'

        return (
            <li class={child ? `${liClass} dropdown` : liClass}>
                <a class={child ? 'nav-link dropdown-toggle' : 'nav-link'} href={url}>{name}</a>
                { child && (
                    <ul className="dropdown-menu">
                        { makeNavItems(child, true)}
                    </ul>
                )}
            </li>
        )
    })
}

除了双重嵌套下拉列表中的“子菜单”类之外，这应该为您完成ul...如果您需要使用嵌套的 CSS 语句设置样式，您可以尝试定位该 ul

.dropdown-menu .dropdown-menu {
    // css here
}

用法

const navItems = makeNavItems(navData)
render(
  <>
    {navItems}
  </>
)
于 2020-09-28T16:11:58.260 回答
0

你可以这样做，这不是一个有效的代码，但它会帮助你引导你完成。

如果你正在使用 Reactjs 类组件，你可以拥有一个 state 属性来保存关于你的导航栏的所有信息。

因此，假设您的 state 属性是您在上面提供的列表。

let state = {
    navigationBar : [...Contents of the array...]
}

之后，在渲染函数中，你应该有这样的东西：

render(){
          let navbar = "<ul>";// opening ul tag, which will hold our navigation bar

          this.state.navigationBar.forEach(function(el) {

          //This is where you will fill the navbar variable to have content from the array

          navbar +="<li class='nav-item'> <a class='nav-link' href={el.url}>{el.name}</a> </li>";
         });

          navbar += "</ul>"; //closing ul tag

          return ({navbar});
        }

在 foreach 循环中，您应该为元素创建嵌套级别，但这只是一个演示，向您展示我将采用的方法。祝你好运 ！:)

于 2020-09-28T11:05:04.323 回答
0

如果子数组有长度，则需要循环。

import React from "react";
import "./style.css";
const list = (data) => {
  return (
    data.map(item => {
      return ( <
        li className = {
          `nav-item ${item.child && item.child.length ? 'dropdown' : ''}`
        } >
        <
        a className = {
          `nav-link ${item.child && item.child.length ? 'dropdown-toggle' : ''
             }`
        }
        href = {
          item.url
        } > {
          item.name
        } <
        /a> {
          item.child && item.child.length &&
            <
            ul className = "dropdown-menu" > {
              item.child.map(ch => < li > < a href = {
                  ch.url
                }
                className = "dropdown-item" > {
                  ch.name
                } < /a> </li > )
            } <
            /ul>
        } <
        /li>
      )
    })
  )
}
export default function App() {
  const data = [{
      "name": "News",
      "url": "/news"
    },
    {
      "name": "Events",
      "url": "/events"
    },
    {
      "name": "Get Involved",
      "url": "/get-involved",
      "child": [{
        "name": "Event Info",
        "url": "/event-info",
        "child": [{
          "name": "Forms & Resources",
          "url": "/forms-resources"
        }]
      }]
    },
    {
      "name": "Membership",
      "url": "/membership"
    },
    {
      "name": "About",
      "url": "/about"
    }
  ]
  return ( <
    div > < ul className = "nav nav-bar" > {
      list(data)
    } <
    /ul> <
    /div>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

于 2020-09-28T11:14:08.673 回答