JavaScriptで入れ子になったメニューを作成する方法は？

Question

私は以下のイメージをサーバーから送信されたコンテンツで実現したいと思います。

我々はset menu items

const items = [ 
    { key: 'editorials', active: true, name: 'Editorials' }, 
    { key: 'review', name: 'Reviews' }, 
    { key: 'events', name: 'Upcoming Events' }, 
] 
//... 
    <Menu vertical color='black' items={items}> 

    </Menu> 

しかし、私はどのようにそれらを巣に表示されていないことができます。項目 'content'をXMLに設定するだけです。

複数のネストされたセクションを含むメニューをJavacriptのReactJS\Semantic-UIに作成するにはどうすればよいですか？

Answer 1

は、私は、次のコンポーネントを作成します。

1. <MenuContainer /> - >私たちのルートコンポーネント

2. <Menu></Menu> - >レンダリングすることができますいずれかを自分自身（<Menu />）または<Item />コンポーネント

3. <Item></Item> - ><li />またはsmthのみをレンダリングできます

そして、我々は、以下のJSONは、当社のサーバーから来ていたとします

{ 
    label: 'Some menu', 
    children: [{ label: 'Sub menu', children: [...] }, ...], 
} 

は、我々のJSONの配列を見つけたとき、それは我々がメニューをレンダリングする必要があることを意味していることを前提としましょう。オブジェクトがあれば、単純な子をレンダリングします。大まかなアルゴリズムは以下のようになります。

const MenuContainer = ({items}) => ({ 
    {items.map(item => item.items ? <Menu items={items} /> : <Item data={item} /> } 
}); 

これはあなたが探しているものですか？