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

从“React”导入React
导出常量菜单=（）=>{
常数项=[
“选项1”，
“选择2”，
“选择3”，
“选择4”，
“选项5”，
]
常量子项=[
“2.选项1”，
“2.选择2”，
“2.选择3”，
“2.选择4”，
“2.选择5”，
“2.选择权6”，
]
返回(
赫拉

{
item.map（（x，索引）=>(

{x}

))
}

)
}

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

上面映射中的某些内容，如

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

                         ))

      </ul>

if（x=='option2'）{

子菜单项.map（（y，i）=>(
假设菜单项中有
子菜单
字段，例如：

    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>
        </>
    )

返回(
赫拉

{
item.map（（x，索引）=>(

{x.name}
{x.subMenu&&x.subMenu.map（（子菜单项，子索引）=>(

{subnumitem.name}

)}

))
}

)
从“React”导入React
导出常量菜单=（）=>{
常数项=[
“选项1”，
“选择2”，
“选择3”，
“选择4”，
“选项5”，
]
常量子项=[
“2.选项1”，
“2.选择2”，
“2.选择3”，
“2.选择4”，
“2.选择5”，
“2.选择权6”，
]
返回(
赫拉

{
item.map（（x，索引）=>{
返回（

{x}

{如果（x==='option2'）{

{
子菜单项.map（（y，i）=>(

{y}

))
}
}）
})
}

)
}

试试这个
我就是这么做的


import React from 'react'

import styled from 'styled-components'

export const Menu = () => {

    const LI = styled.li`
    list-style: '-  ';
    `


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

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

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

                                }
                            </ul>



                        </LI>
                    ))
                }

            </ul>
        </>
    )
}


从“React”导入React
从“样式化组件”导入样式化
导出常量菜单=（）=>{
const LI=styled.LI`
列表样式：'-'；
`
常数项=[
“选项1”，
“选择2”，
“选择3”，
“选择4”，
“选择5”，
]
常量子项=[
“2.选项1”，
“2.选择2”，
“2.选择3”，
“2.选择4”，
“2.选择5”，
“2.选择权6”，
]
返回(

{
item.map（（x，索引）=>(

{x}

{（x=='option2'）&&
子菜单项.map（（y，i）=>(

{y}

))
}


))
}

)
}

只需按原样将条件放入其中…第一次这样做似乎很棘手：p
您的意思是
x！='opcion2'？null:subnumitem.map（…）
？确切地说，我单独进行条件重新设计没有问题，但我在之前的映射中找不到实现这一点的正确方法感谢@Jax pthanks的帮助help@MaykelContrerasCamacho如果这对你有用，你能把它标记为答案吗？谢谢，不过我还是回答我自己的问题

import React from 'react'

import styled from 'styled-components'

export const Menu = () => {

    const LI = styled.li`
    list-style: '-  ';
    `


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

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

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

                                }
                            </ul>



                        </LI>
                    ))
                }

            </ul>
        </>
    )
}