array.map 内的可选 array.map答案

【问题标题】：Optional array.map inside array.maparray.map 内的可选 array.map
【发布时间】：2023-04-03 23:15:02
【问题描述】：

我有一个菜单，由于 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>

类似的东西

提前致谢

【问题讨论】：

你是说conditional renderingx !== 'opcion2' ? null : subMenuItem.map(...)吗？
没错，我单独进行条件重新渲染没有问题，但我无法在之前的映射中找到实现此目的的正确方法
感谢@Jax-p 的帮助

标签： reactjs conditional-statements render

【解决方案1】：

假设您在菜单项中有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>
        </>
    )

【讨论】：

【解决方案2】：

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) => {
                    return ( <li key={index}>
                        {x}                         
                    </li>
                    {if (x === 'option2') {
                        <ul>
                             {
                               subMenuItem.map((y,i)=>(
                                 <li key={i*1000}>
                                            {y}
                                  </li>
                               ))
                             }

                  </ul>})
                })
            }

        </ul>
    </>
)
}

试试这个

【讨论】：

@MaykelContrerasCamacho 如果这对您有用，您能否将其标记为答案。谢谢
我自己回答了自己的问题

【解决方案3】：

这就是我所做的


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

只需将条件按原样放在其中...第一次这样做，虽然看起来很棘手：P

【讨论】：