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

编程问答 2022-04-23

问题描述

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

问题 - 即使我调用 [object Object] getComponent

，我还是在第二级得到 recursively

Edit on codesandbox

解决方法

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

SQLite format 3   @                                                                   .�
   � �                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         W--ctableandroid_metadataandroid_metadataCREATE TABLE android_metadata (locale TEXT)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
   � �                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             en_IN

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

,

问题是你在处理 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 属性，现在它显示了所有数据。

检查 this sandbox

accordionreactjsreactjsreactjsreactjsrecursion