자바 스크립트에서 중첩 된 메뉴를 만드는 방법은 무엇입니까?

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} /> } 
}); 

이 정보가 도움이 되었습니까?