reactjs - 使用 react-table-6 从 json 递归创建嵌套表

Question

我正在尝试使用以下库创建一个嵌套表：react-table-6，其输入 JSON 数据如下所示：

const jsonData =  { 
  "age": "10",
  "lastname": "donut",
  "firstname": "Cake",
  "visit": 3,
  "subops": [
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": [
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": []
    },
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": []
    },
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": []
    }
  ]
    },
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": []
    },
    {
      "firstname": "hem",
      "lastname": "Regular",
      "age": "10",
      "visit": 3,
      "subops": []
    }
  ]
};

从数据中可以看出，子操作具有需要在嵌套表中显示的子行，应该如下所示：

我很困惑我应该如何编写递归函数，以便得到如下所示的 JSX：

<div>
          <ReactTable
            data={tabledata}
            columns={columns}
            pageSize={20}
          //  className="-striped -highlight"
            SubComponent={(row) => {
              return (
                <ReactTable
                  data={tabledata}
                  columns={columndata}
                  // TheadComponent={() => null}
                  defaultPageSize={3}
                  showPagination={false}
                  SubComponent={(row) => {
                    return (
                      <ReactTable
                        data={tabledata}
                        columns={columndata}
                        //TheadComponent={() => null}
                        defaultPageSize={3}
                        showPagination={false}
                      />
                    );
                  }}
                />
              );
            }}
          />
</div>

如果我知道需要嵌套的级别，这会给我正确的输出，但是在我不知道嵌套级别数的 JSON 的情况下，我需要编写一个递归函数，但是我无法包装我对递归和反应组件的看法

方法 1：我尝试编写此递归代码，但它多次粘贴反应表本身

const RecursiveComponent = (data) => {
    console.log("third", data.data.length, data.data, Array.isArray(data.data));
    if (data.data.length === 0) {
        return null;
      }
    else{
        for (let i = 0; i < data.data.length; i++) {
            console.log("i ", i);
           <RecursiveComponent
            data = {data.data[i]["subops"]}/>
            //console.log(data.data[i], "hello");
            var temp = [data.data[i]];
            return(
                    <ReactTable
                    data={temp}
                    columns={columns}
                    pageSize={5}
                    showPagination={false}
                    SubComponent={(row) => {
                    return (
                        <RecursiveComponent
                            data = {data.data[i]["subops"]}/>
                        );

                    }}
                />
            );
        }
    }
}