由React中的utils文件创建菜单和子菜单

Question

我必须使用JSON文件中的值来创建菜单和子菜单。我想创建一个Util文件，该文件将返回菜单项的HTML代码。

不想为此使用实质性的UI

JSON文件

    {
    "data": {
        "menuItems": [{
            "name": "Title1",
            "menu": [{
                    "name": "Item1"
                },
                {
                    "name": "Item2"
                },
                {
                    "name": "Item3",
                    "subMenu": [{
                            "name": "Item1"
                        },
                        {
                            "name": "Item2"
                        }
                    ]
                }
            ]
        }]
    }
}

Index.js文件

renderMenu() {
        return (
        <div className="App">
             {results.menuItems.map((title) => (
                 <div>
                    <div className="bx--col-sm-2 bx--col-md-6">
                        {title.name}
                    </div>
                    <div>
                        <nav className='navigation'>
                            <ul className="mainmenu">
                                {title.menu.length !== 0 ?
                                    title.menu.map(menu => {
                                        <li>{menu.name}</li>
                                                {category.subMenu && category.subMenu.length !==0 ?
                                                    category.subMenu.map(subMenu =>{
                                                        return (
                                                            <ul className="submenu">
                                                                <li>{subMenu.name}</li>
                                                            </ul>
                                                        )
                                                    })
                                                    : null} 
                                    })
                                : null}
                            </ul>
                        </nav>
                    </div>
                 </div>
             ))}
        </div>  
    );
}

我的渲染功能

render（）{ 返回（ this.renderMenu（） ）}

如果我运行此代码。它创建空div为<div class="App"><div class="bx--col-sm-2 bx--col-md-6">Title1</div></div>

它不显示任何菜单项或子菜单项。你能帮忙吗

预先感谢

Answer 1

更改为map：

export const changer = data.menuItems.map(title => { // *** map ***
    return ( // don't forget return
        <div className="bx--col-sm-2 bx--col-md-6">
            {title.name}
        </div>
        {title.menu.length !== 0 ?
            title.menu.map(category => { // *** map ***
                return (
                    <nav class="navigation">
                        <ul class="mainmenu">
                            <li>{category.name} {subCategoryCount}</li>
                            {category.subMenu && category.subMenu.length !==0 ?
                                category.subMenu.map(subcategory => { // *** map ***
                                    return (
                                        <ul class="submenu">
                                            <li>{subcategory.name}</li>
                                        </ul>
                                    );
                                })
                                : null}
                        </ul>
                    </nav>    
                );
            })
        : null}
    );
});

forEach和map之间的差是返回值。 forEach循环返回undefined，map返回数组因此，在这种情况下，map是正确的。