Блог

Главная - Вопросы по программированию - многоуровневый выпадающий список для рекурсии react

многоуровневый выпадающий список для рекурсии react

#javascript #reactjs #recursion #ecmascript-6

#javascript #reactjs #рекурсия #ecmascript-6

Вопрос:

Я создаю многоуровневое меню и хочу использовать рекурсию для отображения меню. Что-то вроде многоуровневого выпадающего списка из here.

В моем коде мое меню выглядит следующим образом. 

 const menu = [
  {
    name: 'Man Utd',
    menu: [
       {
          name: 'Stadium'
       },
       {
          name: 'About'
       }
    ]
  },
  {
    name: 'Liverpool',
    menu: [
       {
           name: 'Contact'
       }
    ]
  }
];

который я затем передаю в свой компонент react.

 const Dropdown = ({ menu }) => {
    const renderMenu = (items) => {
        return items.map((item: any, index: any) => {
            return (
                <div>
                    {item.menu ? renderMenu() : item.name}
                </div>
            )
        })
    }

    return (renderMenu(menu));
}

проблема здесь в том, что это вызывает бесконечный цикл.

Кто-нибудь может посоветовать мне, как я могу это улучшить?

Ответ №1:

Вам нужно передать item.menu в качестве аргумента в renderMenu при рекурсивном отображении меню.

Пример

 const menu = [
  {
    name: "Man Utd",
    menu: [
      {
        name: "Stadium"
      },
      {
        name: "About"
      }
    ]
  },
  {
    name: "Liverpool",
    menu: [
      {
        name: "Contact"
      }
    ]
  }
];

const Dropdown = ({ menu }) => {
  const renderMenu = items => {
    return items.map((item: any, index: any) => {
      return (
        <div style={{ marginLeft: 10 }}>
          {item.name}
          {item.menu ? renderMenu(item.menu) : null}
        </div>
      );
    });
  };

  return <div>{renderMenu(menu)}</div>;
};

ReactDOM.render(<Dropdown menu={menu} />, document.getElementById("root"));  
 <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>

<div id="root"></div>

Комментарии:

1. это здорово, спасибо. Есть идеи о лучшем способе скрыть дополнительное меню. и показывать только при наведении курсора мыши?

2. @peterflanagan Всегда пожалуйста! Это немного усложняет задачу, но вы могли бы реализовать это исключительно в CSS .

3. а, ладно, может быть, что-нибудь попроще, чего я не могу придумать. Как я могу создать дополнительные меню и любое меню ниже display: none ? ` — index > 0 не работает так, как работает только первое меню? Есть идеи? Еще раз спасибо

4. @peterflanagan Пожалуйста, не меняйте вопрос после того, как на него был дан ответ. Рассмотрите возможность создания полностью нового вопроса, если вы не можете в нем разобраться.

5. сделает, имеет смысл!

Ответ №2:

Вы ничего не передаете в renderMenu. Вы должны вызвать renderMenu(item.menu)