Reactjs 动态多级菜单和语义用户界面

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

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

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

导出类递归菜单扩展组件{
render（）{
const{children，textToShow}=this.props；
返回(
{
children.map（child=>{child.userMenuName}）
}
);
}

}

---

但是它没有正确地显示出来。这是。

您可以使用下拉菜单的

选项

道具传递您的下拉菜单项，而不是自己创建它们

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