Javascript 为具有子对象的对象生成表行

我试图以表格格式显示一组对象。如果对象有一个子对象，我希望在继续向下数组到下一个对象之前，它显示在下一行中

在下面的示例中，我成功呈现了一个显示所有顶级或父对象的表：

const renderCategories = (categories) => {
            let myCategories = [];
            for(let category of categories){
                myCategories.push(
                    <tr key={category.name}>
                        <td><input type="checkbox"></input></td>
                        <td>{category.name}</td>
                    </tr>
                );
            }

            return myCategories;
    }

    return(
      <div>
        <table>
          <thead>
            <tr>
              <th><input type="checkbox"></input></th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {renderCategories(category.categories)}
          </tbody>
        </table>
      </div>
    )
};

const renderCategories=（类别）=>{
让myCategories=[]；
for（让类别中的类别）{
myCategories.push(
{category.name}
);
}
返回myCategories；
}
返回(
名称
{renderCategories（category.categories）}
)
};

在我的原始版本中，我没有使用表，而是使用列表，因此通过执行以下操作实现了我想要的：

const renderCategories = (categories) => {
                let myCategories = [];
                for(let category of categories){
                    myCategories.push(
                        <li key={category.name}>
                          {category.name}
                          {category.children.length > 0 ? 
                            {<ul>renderCategories(category.children)}</ul>) : null}
                        </li>
    
                    );
                }
    
                return myCategories;
        }

const renderCategories=（类别）=>{
让myCategories=[]；
for（让类别中的类别）{
myCategories.push(

{category.name}
{category.children.length>0？
{
renderCategories（category.children）}
）：null}

);
}
返回myCategories；
}

这个解决方案显然不适用于我的新用例，因为我无法在表行中呈现表行。这让我发疯，因为似乎没有其他选择可行。我可以使用div而不是表来实现我想要的设计。然而，我想使用一个表，或者至少知道如何使用表

有人能给我指出正确的方向吗？谢谢

使用

Array.flatMap（）

和Array spread返回一个由

元素组成的扁平数组

注意：我还使用

level

和空

元素添加了缩进。如果不需要，可以删除

数组.from（）

行和

级别


const renderCategories=（类别，级别=0）=>
categories.flatMap（（{name，children}）=>{
常数猫=(
{Array.from（{length:level}，（{，i）=>）}
{name}
);
返回长度？
[类别，…渲染类别（儿童，级别+1）]
:
猫；
});
const Demo=（{categories}）=>(
名称
{渲染分类（类别）}
);
const categories=[{name:'A'，children:[{name:'A1'，children:[]}，{name:'A2'，children:[]}，{name:'B'，children:[{name:'B1-1'，children:[]}，{name:'B2'，children[]}]
ReactDOM.render(
,
根
)
th，td{
边框：1px纯黑；
}