动态多级菜单反应和语义用户界面答案

【问题标题】：dynamic multilevel menu react and semantic ui动态多级菜单反应和语义用户界面
【发布时间】：2018-08-02 23:05:15
【问题描述】：

我正在使用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>

查看输出here

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

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

}

但它没有正确显示。这是example data。

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react semantic-ui-css

【解决方案1】：

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

这是 Semantic UI 文档中的一个示例：

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

【讨论】：

【解决方案2】：

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

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"
            }
        ]
     }
]

【讨论】：