Reactjs 菜单未打开正确的索引div

伙计，我正面临一个问题。我有一个二维数据。数据具有包含链接的嵌套结构

const data = [
  // First Div Panel 
  [
    {
      id: 1,
      url: "/services",
      title: "Services"
    },
    {
      id: 2,
      title: "Products",
      children: [
        {
          id: 3,
          url: "/themes-templates",
          title: "Themes & Templates"
        },
        {
          id: 4,
          url: "/open-source",
          title: "Open Source"
        },
        {
          id: 5,
          url: "/solutions",
          title: "Solutions"
        }
      ]
    },
    {
      id: 6,
      url: "/work",
      title: "Work",
      children: [
        {
          id: 7,
          url: "/methodology",
          title: "Methodology",
          children: [
            {
              id: 8,
              url: "/agile",
              title: "Agile",
              children: [
                {
                  id: 9,
                  url: "/scrum",
                  title: "Scrum"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 10,
      url: "/contact-us",
      title: "Contact Us"
    }
  ],
  // Second Div Panel which contains children of second list item
  [
    {
      id: 3,
      url: "/themes-templates",
      title: "Themes & Templates"
    },
    {
      id: 4,
      url: "/open-source",
      title: "Open Source"
    },
    {
      id: 5,
      url: "/solutions",
      title: "Solutions"
    }
  ],
  // Third Div Panel which contains children of third list item
  [
    {
      id: 7,
      url: "/methodology",
      title: "Methodology",
      children: [
        {
          id: 8,
          url: "/agile",
          title: "Agile",
          children: [
            {
              id: 9,
              url: "/scrum",
              title: "Scrum"
            }
          ]
        }
      ]
    }
  ],
  // Fourth Div Panel contains the children of the 3rd sub list item
  [
    {
      id: 8,
      url: "/agile",
      title: "Agile",
      children: [
        {
          id: 9,
          url: "/scrum",
          title: "Scrum"
        }
      ]
    }
  ],
  // Fourth Div Panel contains the children of the 3rd sub sub list item
  [
    {
      id: 9,
      url: "/scrum",
      title: "Scrum"
    }
  ]
];

我的任务是利用二维数据，在

react

中创建一个移动菜单，该菜单具有类似于推面板的结构

尽管如此，我还是尝试这样创作。我所做的是将每个子数组视为一个单独的面板

div

。首先，子数组项将在根面板上考虑，根面板默认可见。如果某个项具有

子项

属性，则表示在该列表项上动态生成

下一个

按钮。当我们单击此按钮时，它将在面板上添加一个可见的

类。但是，问题是，它将如何跟踪哪个面板与该按钮单击关联？我尝试使用
activeId
和
prevId
的状态，但我的索引工作不正常，无法打开正确的面板。您可以在chrome inspector面板上检查我的解决方案。如果你告诉我我做错了什么，我会很感激的


代码：
//获取一个钩子函数
const{useState}=React；
//#区域数据
常数数据=[
//第一分区小组
[
{
id:1，
url:“/services”，
标题：“服务”
},
{
id:2，
标题：“产品”，
儿童：[
{
id:3，
url:“/主题模板”，
标题：“主题与模板”
},
{
id:4，
url:“/开源”，
标题：“开源”
},
{
id:5，
url:“/solutions”，
标题：“解决方案”
}
]
},
{
id:6，
url:“/work”，
标题：“工作”，
儿童：[
{
id:7，
url:“/方法”，
标题：“方法论”，
儿童：[
{
id:8，
url:“/agile”，
标题：“敏捷”，
儿童：[
{
id:9，
url:“/scrum”，
标题：“Scrum”
}
]
}
]
}
]
},
{
id:10，
url:“/联系我们”，
标题：“联系我们”
}
],
//第二分区小组
[
{
id:3，
url:“/主题模板”，
标题：“主题与模板”
},
{
id:4，
url:“/开源”，
标题：“开源”
},
{
id:5，
url:“/solutions”，
标题：“解决方案”
}
],
//第三分区小组
[
{
id:7，
url:“/方法”，
标题：“方法论”，
儿童：[
{
id:8，
url:“/agile”，
标题：“敏捷”，
儿童：[
{
id:9，
url:“/scrum”，
标题：“Scrum”
}
]
}
]
}
],
//第四分区小组
[
{
id:8，
url:“/agile”，
标题：“敏捷”，
儿童：[
{
id:9，
url:“/scrum”，
标题：“Scrum”
}
]
}
],
//第五分区小组
[
{
id:9，
url:“/scrum”，
标题：“Scrum”
}
]
];
//#端域数据
//#区域成分
const panel菜单=道具=>{
const{title}=props；
const[items，setItems]=useState（数据）；
//面板的标题标题
const[headerTitle，setHeaderTitle]=useState（标题？标题：“”）；
//面板的上一个标题标题
const[prewheadertitle，setprewheadertitle]=使用状态（标题？标题：“”）；
//ActiveIndex=>0表示默认情况下主面板处于活动状态
const[activeId，setActiveId]=useState（0）；
//以前的索引
const[prevId，setPrevId]=useState（0）；
const handlePanelBtn=（newTitle，index，prevIndex）=>{
//标题检查
常量titleProp=标题？标题：“”；
const prevTitle=索引===0？标题栏：标题栏；
//设定状态
setPrevHeaderTitle（prevTitle）；
设置标题（新标题）；
setActiveId（索引）；
setPrevId（prevIndex）；
};
常量面板渲染器=（）=>{
const panelsJSX=[]；
for（设i=0；i
{items[i].map（（item，index）=>{
//这意味着它有孩子
如果（item.children&&item.children.length>0）{
childItemIndex++；
返回(

{item.url(
) : (
{item.title}
)}
handlePanelBtn（item.title，index，prevId）}
>

);
}否则{
返回(


);
}
})}

);
面板Sjsx.推动（面板）；
}
返回面板SJSX；
};
常量渲染器=（）=>{
如果（items&&items.length>0）{
返回(
{/*面板操作=>Header*/}
{/*上一个按钮*/}
{activeId！==0&&(
handlePanelBtn（前置标题、前置ID、前置ID）
}
>
)}
{/*标题*/}
{校长&&(
{headerTitle}
)}
{/*关闭按钮*/}
×
{/*面板子包装器*/}
{panelRenderer（）}
);
}
};
返回{renderer（）}；
};
//#端域分量
//渲染它
ReactDOM.render(
,
document.getElementById（“根”）
)

*，：之前，：之后{
import React from "react";

export const PanelContext = React.createContext();
export function PanelProvider({ children }) {
  const [currentPanel, setCurrentPanel] = React.useState([0]);
  const addItemToPanel = item => setCurrentPanel(prev => [item, ...prev]);
  const goBack = () => setCurrentPanel(prev => prev.slice(1));
  return (
    <PanelContext.Provider
      value={{
        currentPanel: currentPanel[0],
        setCurrentPanel: addItemToPanel,
        goBack
      }}
    >
      {children}
    </PanelContext.Provider>
  );
}

const Panel = ({ items, id, title }) => {
  const { currentPanel, setCurrentPanel, goBack } = React.useContext(
    PanelContext
  );
  const panels = [];
  return (
    <>
      <div
        className={id === currentPanel ? "p__wrap visible" : " p__wrap hidden"}
      >
        <h2>
          {title && <button onClick={goBack}>{"<"}</button>} {title || "Menu"}{" "}
        </h2>
        <div className="p__panel">
          <ul>
            {items.map(item => {
              if (item.children)
                panels.push(
                  <Panel
                    title={item.title}
                    id={item.id}
                    items={item.children}
                  />
                );
              return (
                <React.Fragment key={item.id}>
                  <li>
                    {item.title}
                    {item.children && (
                      <button
                        onClick={() => {
                          setCurrentPanel(item.id);
                        }}
                      >
                        {">"}
                      </button>
                    )}
                  </li>
                </React.Fragment>
              );
            })}
          </ul>
        </div>
      </div>
      {panels}
    </>
  );
};
export const PanelMenu = props => {
  return (
    <PanelProvider>
      <Panel items={data} id={0} />
    </PanelProvider>
  );
};