@historydev
Острая аллергия на анимешников

Как построить вложенное меню?

Я переписываю проект на реакте, если пробую через createElem/appendChild, получаю ошибку. Мне нужно вернуть меню в таком формате:

<nav>
  <ul>
   <li>
     <ul>
       <li><Link to='/'>Children item</Link></li>
     </ul>
     <Link to='/'>Item</Link>
  </li>
  </ul>
</nav>

Сейчас я сортирую меню по порядку и вывожу в консоль заголовки пунктов, как мне это реализовать?

export default function TopBar() {
    return (
        <Router>

            { createNavigation(navigationItems) }

        </Router>
    )
}

const navigationItems = [
    {
        id: 3,
        title: 'Пункт 3',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 2,
        title: 'Пункт 2',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 1,
        title: 'Пункт 1',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 4,
        title: 'Пункт 4',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            },
            {
                id: 3,
                title: 'Пункт 3'
            },
            {
                id: 2,
                title: 'Пункт 2'
            }
        ]
    }
];

function sortItemsInOrder(items) {

    if(Array.isArray(items)) {

        items = items.sort(inOrder);

        function inOrder(item1, item2) {
            return item1.id - item2.id
        }

        return items

    }

    return [{id: 0, title: 'No items', children: [{id: 0, title: 'No children items'}]}]

}

function createNavigation(items) {

    sortItemsInOrder(items).forEach((item, i, arr) => {

        console.log(item.title);

        sortItemsInOrder(item.children).forEach((item, i, arr) => {
            console.log(item.title)
        })

    });

}
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
const Menu = ({ items }) =>
  items instanceof Array && items.length
    ? <ul>
        {items.map(n => (
          <li key={n.id}>
            <a>{n.title}</a>
            <Menu items={n.children} />
          </li>
        ))}
      </ul>
    : null;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы