Question

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

Answer 1

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

以下是语义UI文档中的示例：

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

动态多级菜单反应和语义ui

1 个答案: