递归地映射有无限数量的嵌套数组的数组

Question

我有一组庞大的数据，基本上可以追溯到800年前的一个家族树，并且有很多嵌套的父/子数组。

我知道.map方法可以在数组/嵌套数组上循环到有限的大小。然而，对于嵌套数组的映射，代码如何是极简主义的呢？

FYI:这是一个反应应用程序。

样本数据：

const complete_date = [
    {
        "fullname": "some name",
        "dob": "",
        "children": [
          {
            "id": "someid",
            "fullname": "some name",
            "dob": "",
            "children": [
              {
                "id": "someid",
                "fullname": "some name",
                "dob": "",
                "children": [
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": "",
                                "children": [
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": ""
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
    }
]

目前我知道每次都会写.map方法。

示例：--这是来自当前实现的一个片段，这是一个真正的痛苦。

  {complete_data.map((data) => (
  <li>
    {data.fullname}
    <ul className="list-disc">
      {data.children.map((d) => (
        <li className="ml-10">
          {d.fullname}
          {d.children.length
            ? d.children.map((d2) => (
                <ul className="list-disc">
                  <li className="ml-10">
                    {d2.fullname}
                    <ul className="list-disc">
                      {d2.children.length
                        ? d2.children.map((d3) => (
                            <li className="ml-10">
                              {d3.fullname}
                              <ul className="list-disc">
                                {d3.children.length
                                  ? d3.children.map((d4) => (
                                      <li className="ml-10">
                                        {d4.fullname}
                                        <ul className="list-disc">
                                          {d4.children.length
                                            ? d4.children.map(
                                                (d5) => (
                                                  <li className="ml-10">
                                                    {d5.fullname}
                                                  </li>
                                                )
                                              )
                                            : null}
                                        </ul>
                                      </li>
                                    ))
                                  : null}
                              </ul>
                            </li>
                          ))
                        : null}
                    </ul>
                  </li>
                </ul>
              ))
            : null}
        </li>
      ))}
    </ul>
  </li>
))}

任何想法或帮助简化这一过程将是非常感谢的。谢谢。

Answer 1

const List = ({complete_data})=> {
   return (
      <ul className="list-disc">
        {complete_data.map(x=> <Item key={x.id} data={x} />)}
      </ul>
   )
}

const Item = ({data})=> {
   return (
     <li className="ml-10">
         {data.fullname}
         {data.children.length > 0 && (
            <ul className="list-disc">
               {data.children.map((x)=> <Item key={x.id} data={x} />)}
            </ul>
         )}
     </li>
   )
}