时间戳

首页 > 解决方案 > array.map 内的可选 array.map

reactjs - array.map 内的可选 array.map

问题描述

我有一个菜单，由于 array.map 而呈现，但我也想呈现一个子菜单，但我找不到实现这一点的方法

例如我正确地完成了这个


import React from 'react'

export const Menu = () => {


    const item = [
        'option1',
        'option2',
        'option3',
        'option4',
        'opction5',
    ]

    const subMenuItem = [
        '2.option1',
        '2.option2',
        '2.option3',
        '2.option4',
        '2.option5',
        '2.option6',
    ]
    return (
        <>
            <div>
                Hola
            </div>

            <ul>
                {
                    item.map((x, index) => (
                        <li key={index}>
                            {x}
                                                        
                        </li>
                    ))
                }

            </ul>
        </>
    )
}

但是现在我想在 option2 上有一个子菜单，如果存在某个变量等于 item 中的选项的条件，则映射 subMenuItem 数组

上面的映射里面的东西就像

if (x === 'option2') {
    <ul>
        subMenuItem.map((y,i)=>(
             <li key={i*1000}
                 {y}
             </li>

                         ))

      </ul>

类似的东西

提前致谢

标签： reactjsconditional-statementsrender

解决方案

假设您subMenu在菜单项中有字段，例如：

    const menu = [
        {"name": 'option1'},
        {"name": 'option2', "subMenu": [...]},
        {"name": 'option3'},
    ]

您可以有条件地渲染：

return (
        <>
            <div>
                Hola
            </div>
            <ul>
                {
                    item.map((x, index) => (
                        <li key={index}>
                           <>
                            {x.name}
                            {x.subMenu && x.subMenu.map((subMenuItem, subIndex) => (
                               <li key ={index + subIndex}>
                                  {subMenuItem.name}
                               </li>
                            )}
                          </>                     
                        </li>
                    ))
                }
            </ul>
        </>
    )

推荐阅读