json - 在 React 中递归渲染嵌套数据，我想恢复这个文件 json 的“名称”

Question

我将如何从这个列表 json 中创建一个“名称”列表

我试过这段代码，但我只得到第一个“名称”json文件

[
    {
        "id": "LIB1",
        "name": "Library 1",
        "context": "C1",
        "children": [
            {
                "id": "SKI1",
                "name": "SKill 1",
                "context": "C1",
                "children": [
                    {
                        "id": "SKI11",
                        "name": "SKill 11",
                        "context": "C1"
                    },
                    {
                        "id": "SKI12",
                        "name": "SKill 12",
                        "context": "C1",
                        "children": []
                    },
                    {
                        "id": "SKI13",
                        "name": "SKill 13",
                        "context": "C1",
                        "children": [
                            {
                                "id": "SKI131",
                                "name": "SKill 131",
                                "context": "C1",
                                "children": [
                                    {
                                        "id": "SKI1311",
                                        "name": "SKill 1311",
                                        "context": "C1",
                                        "children": [
                                            {
                                                "id": "SKI13111",
                                                "name": "SKill 13111",
                                                "context": "C1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "id": "SKI2",
                "name": "SKill 2",
                "context": "C1",
                "children": [
                    {
                        "id": "SKI21",
                        "name": "SKill 21",
                        "context": "C1",
                        "children": [
                            null
                        ]
                    },
                    {
                        "id": "SKI22",
                        "name": "SKill 22",
                        "context": "C1"
                    }
                ]
            }
        ]
    }
]

我试过这段代码，但我只得到第一个“名字”

const PostData =({data})=>{
   return(
       <div>
           <ul>
               {data.map(item => {
                   return <div>
                   <li>
                   {item.name}
                   {item.children.name && <PostData data={item.children.name}/>}
                   </li>

                   </div>

               })}

           </ul>
       </div>
   )
}

const DATA = require('./data.json')


function App() {
 return (
   <div className="App">
       <PostData data={DATA}/>
   </div>
 );
}

export default App;

我想恢复这个文件json的“名称”谢谢请帮帮我

我试过这段代码，但我只得到第一个“名字”

感谢您的帮助

标签： jsonreactjs

Answer 1

item.children.name不存在，children 是一个数组。你可以使用item.children.ength

如果要排除没有名称的节点，可以先过滤数组。