如何在reactjs中创建嵌套手风琴

Question

简介-我正在尝试在Accordion中显示JSON数据。所以我使用了react-sanfona(github(来构建它。我正在尝试调用getComponent函数recursively，这样我就可以检查它是array还是object，如果它是数组，我正在调用相同的函数。最好让你看看迄今为止的进展。

问题-我在第二级获得[object Object]，甚至我称之为getComponentrecursively

在codesandbox 上编辑

Answer 1

问题是在处理object时没有返回任何内容

所以这个部分

Object.keys(record).map((key, index) => {
console.log(44);
return (
<AccordionItem className="ml-5" title={`1 - ${index}`} expanded>
{getComponent(record[key])}
</AccordionItem>
);
});

应该是

return Object.keys(record).map((key, index) => {
console.log(44);
return (
<AccordionItem className="ml-5" title={`1 - ${index}`} expanded>
{getComponent(record[key])}
</AccordionItem>
);
});

我添加了一个默认的expanded属性，现在它显示所有数据。

检查这个沙箱

Answer 2

Hy，我不知道你到底想显示什么，但这里有一个可用的版本。

import { Accordion, AccordionItem } from "react-sanfona";
import "./styles.css";
const datalist = [
{
id: 3423235234,
name: "John",
address: [
{
first: "city1",
second: "city2"
}
]
}
];
export default function App() {
function getComponent(record) {
if (Array.isArray(record)) {
return record.map((b, index) => (
<AccordionItem className="ml-5" title={`${index}`} key={index}>
{getComponent(b)}
</AccordionItem>
));
}
if (typeof record === "object") {
return (
<div>
{Object.keys(record).map((key, index) => {
return (
<AccordionItem
className="ml-5"
title={`1 - ${index}`}
expanded
key={index}
>
{getComponent(record[key])}
</AccordionItem>
);
})}
</div>
);
}
if (typeof record === "string" || typeof record === "number") {
console.log("string or number: ", record);
return <AccordionItem className="ml-5" title={`2 - ${record}`} />;
}
return (
<AccordionItem className="ml-5" title={`3 - ${record.toString()}`} />
);
}
return (
<div className="App">
<div className="px-7">
<Accordion>{getComponent(datalist)}</Accordion>
</div>
</div>
);
}

您正在使用的包在控制台中引发了许多错误(没有配置(。你检查过材料的手风琴了吗？https://material-ui.com/components/accordion/

Answer 3

这是工作代码，可能会对您有所帮助在这里，最初的根文件夹将隐藏所有子文件夹，一旦点击根->其直接子项将在上显示/隐藏，依此类推

//explorer is the json coming from parent component
import React, { useState } from "react";
function Accodian({ explorer }) {
const [expand, setExpand] = useState(false);
if (explorer.children) {
return (
<div>
{/* {explorer.children ? ( */}
<>
<div onClick={() => setExpand((prevState) => !prevState)}>
{explorer.name}
</div>
{expand ? (
<>
{explorer.children.map((child) => {
// return <div key={child.name} style = {{paddingLeft: '20px'}}>{child.name}</div>;
return <Accodian explorer={child} key={child.name} />;
})}
</>
) : null}
</>
{/* ) : null} */}
</div>
);
} else {
return <div style={{ paddingLeft: "20px" }}>{explorer.name}</div>;
}
}
export default Accodian;

检查此沙盒：https://codesandbox.io/s/js-recursion-accordian-v03y5q?file=/src/components/Accordian.js:0-823/