2

我正在使用Semantic UI React并尝试创建多级菜单组件或嵌套菜单。

我能够创建一个静态菜单组件，如下所示：

 <Menu>
    <Menu.Item>
        <Dropdown text='MCU' pointing className='link item'>
            <Dropdown.Menu>
                <Dropdown.Item>                      
                </Dropdown.Item>
                <Dropdown.Item>                       
                </Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </Menu.Item>
    <Menu.Item>           
    </Menu.Item>        
    <Menu.Item>
        Dropdown Menu
    </Menu.Item>
</Menu>

在这里查看输出

我试图为该菜单创建一个动态组件，如下所示 -

export class RecursiveMenu extends Component {
render() {
    const { children, textToShow } = this.props;
    return (
        <Dropdown key={children.wbMenuId} text={textToShow} pointing={children.childMenu ? true : false} className='link item'>
            <Dropdown.Menu>
                {
                    children.map(child => <Dropdown.Item>{child.userMenuName}</Dropdown.Item>)
                }
            </Dropdown.Menu>
        </Dropdown>
    );
}

}

但它没有正确显示。这是示例数据。

4

2 回答 2

0

您可以通过创建递归组件来做到这一点。在我的示例中，我使用了侧边菜单而不是下拉菜单，但原理相似，如果不一样的话。

Menu 组件（递归）

export function Menu(props) {
    return(
        <ul className="list-unstyled accordion">
            {props.menus && props.menus.map((menu) => {
                return (
                    <li key={menu.url} className="accordion-item border-0 bg-primary">
                        {menu.menus ? 
                        <h2 className="accordion-header">
                            <button className="accordion-button collapsed ps-1 py-1 bg-primary text-light" 
                                data-bs-toggle="collapse" data-bs-target={`#${menu.url}`} type="button">
                                <strong>{menu.name}</strong>
                            </button>
                        </h2> : 
                        <a className="ps-2 text-decoration-none d-inline-block btn-primary w-100" href={`/${menu.url}`}>
                            {menu.name}
                        </a>
                        }
                        
                        {menu.menus && 
                        <div className="accordion-collapse collapse" id={menu.url}>
                            <div className="accordion-body p-1 ps-2 pe-0">
                                <Menu id={props.id} menus={menu.menus}/>
                            </div>
                        </div>
                        }
                    </li>
                )
            })}
        </ul>
    )
}

因此，无论您对菜单的主要调用是什么，您都需要某种带有嵌套项的数组。

我的嵌套项目称为菜单。

所以json示例将是：

[
    {   
        "name": "Home", 
        "url": "" 
    },
    {   
        "name": "About us", 
        "url": "about-us",
        "menus": [
            {
                "name": "Who are we?",
                "url": "who-are-we"
            }
        ]
     }
]
于 2021-09-12T12:21:05.687 回答
-4

您可以使用 Dropdown 的options道具来传递您的下拉项目，而不是自己创建它们。

这是语义 UI 文档中的示例：

https://react.semantic-ui.com/modules/dropdown#dropdown-example-item-content

于 2018-02-24T02:01:34.660 回答