reactjs - 如何在 React js 中创建切换列表功能

Question

我可以使用以下代码生成如下所示的输出，

code:
import React, { useEffect, useState } from 'react'
import axios from 'axios'

function Test1()
{
    const [data, setdata] = useState([])
    useEffect( () => {
        axios.get("https://api.npoint.io/93bed93a99df4c91044e")
        .then(res => {
            console.log(res.data.body.Recommendations)
            setdata(res.data.body.Recommendations)
            
        })
        .catch(err => 
            {
                return err.meassage
            })
    },[])
    return (
        <div>
            {
                data.map((post) => {
                    return (    
                        <div>
                            <p>{post.RestaurantName}</p>
                            {
                                post.menu.map((menu) =>{
                                    if(menu.type == "sectionheader")
                                    {
                                        return (
                                            <div><p>----{menu.name}</p> {
                                                menu.children.map((child) => 
                                                {
                                                    if(child.type=="item" && child.selected == 1)
                                                    {
                                                        return (
                                                            <div>
                                                                <p>----------{child.name}</p> 
                                                                {
                                                                    child.children.map((child1) =>{
                                                                        if(child1.selected == 1)
                                                                        {
                                                                           return (<div>
                                                                                <p>---------------------{child1.name}</p> 
                                                                                {
                                                                                    child1.children.map((child2) => {
                                                                                        if(child2.selected ==1) {
                                                                                            return <p>------------------------------{child2.name}</p>
                                                                                        }
                                                                                    })
                                                                                }
                                                                           </div>)  
                                                                        }
                                                                    })
                                                                }
                                                            </div>
                                                        ) 
                                                    }
                                                } )
                                            }
                                            </div>
                                        )
                                        
                                    }
                                } )
                            }
                        </div>
                    )
                })
            }
        </div>
    )
}
export default Test1

output:
Restaurant1
--> Item1
-----> Child1
----------> Child1.1
----------> Child1.2
------> Child2
------> Child3
----------> Child3.1

在生成图像中的输出时需要一些帮助。卡在 onclick 功能中，我可以在 onclick 后在控制台上打印下拉数据，但无法打印为下拉菜单。例如：如果我点击 Restaurant1，我可以在控制台上打印 Item1，但不能渲染该项目。

标签： reactjsaxiosreact-hooksonclicklistener