Question

您好，该问题已经得到治疗，但我仍然找不到真正的答案。

我是新来的反应者，我想呈现一个“名称”列表。我使用了map函数来遍历对象，但是我只有第一个“名称”（库1），而没有其他名称。为我提供完整的for循环语法以呈现对象。谢谢

const side =[
  {
      "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"
                  }
              ]
          }
      ]
  }
]

// Rendu recursif de donnée json 


const MyComponent  = ({collection}) => {
  if(Array.isArray(collection)) {
      return <ul>
            {collection.map((data)=> {
                return (<ul>
                     <li>{data.name}</li>
                     <li><MyComponent collection={data.name}/></li>
                   </ul>)

            })
            }
      </ul>
  }
  return null;
}

class App extends React.Component {
 render() {
     return (
        <MyComponent collection={side}/>
     )
 }
}

Answer 1

尝试以下示例：

const MyComponent  = ({collection}) => (
    Array.isArray(collection) ? <ul>
        {collection.map((item, index) => (
            item && item.children && Array.isArray(item.children) ?
                (
                    <li key={index}>
                        {item.name}
                        {<MyComponent collection={item.children} />}
                    </li>
                ) : <li key={index}> {item && item.name} </li>
        ))}
    </ul> : null
)

class App extends React.Component {
   render() {
       return (
           <MyComponent collection={side} />
       )
   }
}

在React中递归渲染深层嵌套数据

1 个答案: