如何使用 React 從嵌套對象創建列表？

Question

我有這種類型的 json 結構（我知道它看起來像一個混亂的 package 文件......）：

 "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"
                }
            }
        },

結果應該在這里：

我需要從此結構創建一個列表，然后添加按鈕以展開和折疊每個“節點”。

我可以弄清楚出了什么問題...我已將組件設置為遞歸組件，但我無法獲得遞歸值。

這是容器組件

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

順便說一句-我不想使用任何庫...

代碼筆

Answer 1

您正在嘗試檢查字符串上的 hasOwnProperty。 並且如果 typeof 是 object，則 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>
    );
}