Je construis un menu à plusieurs niveaux et souhaite utiliser la récursivité pour afficher le menu. Quelque chose comme la liste déroulante à plusieurs niveaux de ici.

Dans mon code, mon menu ressemble à ceci.

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

Que je passe ensuite dans mon composant de réaction.

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

    return (renderMenu(menu));
}

Le problème ici est qu'il provoque une boucle infinie.

Quelqu'un peut-il me conseiller sur la façon dont je peux améliorer cela?

1
peter flanagan 15 mars 2019 à 13:01

2 réponses

Meilleure réponse

Vous devez passer item.menu comme argument à renderMenu lorsque vous affichez le menu de manière récursive.

Exemple

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>
2
Tholle 15 mars 2019 à 10:06

Vous ne transmettez rien à renderMenu. Vous devriez appeler renderMenu(item.menu)

1
Razvan Pop 15 mars 2019 à 10:05