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

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

结果如下所示：

我需要从这个结构中创建一个列表，然后在“添加”按钮上展开和折叠每个“节点”

我知道怎么回事了。。。我已将该组件设置为递归组件，但无法获取递归值

这是容器组件

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

从“../assets/complex package.json”导入dataObj；
从“../components/DependenciesList”导入DependenciesList；
导出默认函数依赖项（）{
返回(
);
}

这是视图组件

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

import React，{useffect，useState}来自“React”；
导出默认函数依赖项列表（{items}）{
返回(

{Object.keys（items.dependencies）.map（（item，index）=>{
返回(
{（typeof（items.dependencies[item]）=='object'）？
：（items.dependencies[item].hasOwnProperty（'name'））
？项。依赖项[项]：“”）}
)
})}

);
}

b、 我不想使用任何图书馆

---

您正在尝试检查字符串的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>
    );
}

import React，{useffect，useState}来自“React”；
导出默认函数依赖项列表（{items}）{
const showItem=（项目）=>{
控制台日志（项目）；
console.log（items.dependencies[item]）；
返回`${item}${items.dependencies[item]}`
}
返回(

{Object.keys（items.dependencies）.map（（item，index）=>{
返回(
{（typeof（items.dependencies[item]）=='object'）？
：showItem（项目）}
);
})}

);
}

您的问题中没有包含，所以我只想说，使用是一个非常好的呈现JSON数据的库。