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

Question

简介 - 我试图在 Accordion 中显示 JSON 数据。所以我使用 react-sanfona (github) 来构建它。我正在尝试调用 getComponent 函数 recursively 以便我可以检查它是否是 array 或 object 如果它是数组我正在调用相同的函数。最好向您展示目前的进展情况。

问题 - 即使我调用 getComponent recursively

我也在第二级得到 [object Object]

Edit on codesandbox

Answer 1

嘿，我不知道你到底想显示什么，但这是一个有效的版本。

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

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

Answer 2

问题是你在处理 object

时没有 return 任何东西

所以这部分

  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 属性，现在它显示所有数据。

检查 this sandbox

Answer 3

这是工作代码，可能对您有所帮助在这里，最初根文件夹将在单击根后隐藏所有子文件夹 -> 它的直接子文件夹将是 displayed/hidden 等等

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

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

How to create a nested accordion in reactjs

recursion

accordion

reactjs