如何使用React从嵌套对象创建列表？

Question

我有这种类型的json结构(我知道它看起来像一个乱七八糟的包文件……)：

 "react-dom": {
            "name": "react-dom",
            "version": "16.8.6",
            "dependencies": {
                "react": "^16.8.6",
                "loose-envify": {
                    "name": "loose-envify",
                    "version": "1.3.0",
                    "dependencies": {
                        "js-tokens": "^4.0.0"
                    }
                },
                "object-assign": "^4.1.1",
                "prop-types": {
                    "name": "prop-types",
                    "version": "15.7.2",
                    "dependencies": {
                        "loose-envify": {
                            "name": "loose-envify",
                            "version": "1.4.0",
                            "dependencies": {
                                "js-tokens": "^4.0.0"
                            }
                        },
                        "object-assign": "^4.1.1",
                        "react-is": "^16.8.1"
                    }
                },
                "scheduler":{
                    "name": "scheduler",
                    "version": "0.14.0",
                    "dependencies": {
                        "loose-envify": {
                                "name": "loose-envify",
                                "version": "1.4.0",
                                "dependencies": {
                                    "js-tokens": "^4.0.0"
                                }
                            }
                        },
                        "object-assign": "^4.1.1"
                }
            }
        },

结果应该如下所示：

​

​

我需要从这个结构创建一个列表，然后点击add按钮来展开和折叠每个“节点”。

我能找出哪里出了问题。我已经将组件设置为递归组件，但我无法获得递归值。

这是容器组件

import dataObj from '../assets/complex-package.json';
import DependenciesList from '../components/DependenciesList';
export default function Dependencies() {
    
  return (
    <div>
     <DependenciesList items={dataObj}/>
    </div>
  );
}

这是视图组件

import React, { useEffect, useState } from 'react';
export default function DependenciesList({ items }) {

    return (
        <ul>
            {Object.keys(items.dependencies).map((item, index) => {
                return (
                    <li key={index}>{(typeof (items.dependencies[item]) === 'object') ?
                        <DependenciesList items={items.dependencies[item]} /> : (items.dependencies[item].hasOwnProperty('name') 
                        ? items.dependencies[item] : '')}</li>
                )
            })}
        </ul>
    );
}

b.t.w -我不想使用任何库...

CodePen

Answer 1

您正在尝试检查字符串上的hasOwnProperty。如果typeof是object，那么当你签入时，对象将不会到达其他原因。如果我很好地理解了你的问题，我认为下面的代码会有所帮助。

import React, { useEffect, useState } from 'react';
export default function DependenciesList({ items }) {
  const showItem = (item) => {
    console.log(item);
    console.log(items.dependencies[item]);
    return `${item} ${items.dependencies[item]}`
  }
  return (
        <ul>
            {Object.keys(items.dependencies).map((item, index) => {
                return (
                    <li key={index}>{(typeof (items.dependencies[item]) === 'object') ?
                    <DependenciesList items={items.dependencies[item]} /> : showItem(item)}</li>
                );
            })}
        </ul>
    );
}