Javascript 返回函数递归

您好，我正在尝试使用递归打印数据，这是函数：

function list({ data, tab }){

    if( !data || !data.length ){
        return null;
    }        

    return data.map( item => {
      <React.Fragment>
            <div className="row" key={item.id} >
                <div className="col-md-10">
                    { tab + item.name}
                </div>
                <div className="row col-md mx-auto">
                    <Link 
                        to={`/edit/${item.id}`} 
                        className="col-md px-0" 
                        title="Edit"
                    >
                        Edit
                    </Link>   
                    <button
                        className="col-md px-0"
                        onClick={ () => delete(item.id) }
                        title="Delete"
                    >
                      Delete>                                    
                    </button>   
                </div>
            </div>
            <list data={item.child} tab={tab+"\t"} />
      </React.Fragment>
    });
}

---

你可以看到树完全是dinamic的，所以我可以使用递归来解决它，但是我遇到了一些问题，我只显示了“名称1”，而不是所有的数据，我能做些什么来获得它呢？

像这样的事情怎么样

const rows = []
const data = [
    {
        id: '0',
        name: 'name 1',
        parent: null,
        child: [{
            id: '4',
            name: 'name 4',
            parent: '0',
            child: [{
                id: '3',
                name: 'name 3',
                parent: '4',
                child: [{}]
            }]
        },
        {
            id: '2',
            name: 'name 2',
            parent: '0',
            child: [{
                id: '5',
                name: 'name 5',
                parent: '2',
                child: [{}]
            }]
        },
        {
            id: '6',
            name: 'name 6',
            parent: '0',
            child: [{}]
        }]
    }
]

const Row = (item, tab) => {
    return (
        <div className="row" key={item.id}>
            <div className="col-md-10">
                {tab + item.name}
            </div>
            <div className="row col-md mx-auto">
                <Link 
                    to={`/edit/${item.id}`} 
                    className="col-md px-0" 
                    title="Edit"
                >
                    Edit
                </Link>
                <button
                    className="col-md px-0"
                    onClick={() => delete (item.id)}
                    title="Delete"
                >
                    Delete>
                </button>
            </div>
        </div>
    )
}

const print = (data, tab) => {
    data.forEach(item => {
        if (Object.keys(item).length === 0) {
            return
        }
        rows.push(Row(item, tab))

        if (item.child && item.child.length > 0) {
            print(item.child, tab + "\t")
        }
    })
}

print(data, '')
return rows

const行=[]
常数数据=[
{
id:'0'，
名称：“名称1”，
父项：null，
儿童：[{
id:'4'，
名称：“名称4”，
父项：“0”，
儿童：[{
id:'3'，
名称：“名称3”，
家长：‘4’，
子项：[{}]
}]
},
{
id:'2'，
名称：“名称2”，
父项：“0”，
儿童：[{
id:'5'，
名称：“名称5”，
家长：‘2’，
子项：[{}]
}]
},
{
id:'6'，
名称：“名称6”，
父项：“0”，
子项：[{}]
}]
}
]
常量行=（项目，选项卡）=>{
返回(
{tab+item.name}
编辑
删除（item.id）}
title=“删除”
>
删除>
)
}
常量打印=（数据，选项卡）=>{
data.forEach（项=>{
if（Object.keys（item）.length==0）{
返回
}
行。推送（行（项目，选项卡））
如果（item.child&&item.child.length>0）{
打印（item.child，tab+“\t”）
}
})
}
打印（数据“”）
返回行

您的打印函数

在调用自身之前返回

s。即使你解决了这个问题，它也不会起作用。内部

print（）

调用的结果必须是返回的JSX的一部分。事实上，你选择了

print

作为名字这一事实意味着你的方法是错误的；该函数应被称为

jsx

或类似函数。它不应该输出（“打印”）任何内容，只需将提供的树转换为JSX版本。代码中存在两个问题：

if

语句从未执行，因为您事先从函数返回了

。您在循环内部执行
return
ing，即循环只执行一次。您也不会对递归
print
调用的返回值执行任何操作。不清楚嵌套数据相对于父对象应该呈现在何处。@Chris G，所以我应该删除“return”并更改name的函数？？？…对不起，我不是有意让您混淆的。我的意思是，您选择的名称表明您以错误的方式处理此问题，您的代码证实了这一点。如果您的方法是在控制台应用程序中打印内容，那么您的方法很好，但是对于React和JSX，您需要将树转换为表达式，而不是一堆打印语句。不过你绝对需要退货。这里有一个最小的例子：@chrisg谢谢你！！！这帮我谢谢你兄弟！！！！
const rows = []
const data = [
    {
        id: '0',
        name: 'name 1',
        parent: null,
        child: [{
            id: '4',
            name: 'name 4',
            parent: '0',
            child: [{
                id: '3',
                name: 'name 3',
                parent: '4',
                child: [{}]
            }]
        },
        {
            id: '2',
            name: 'name 2',
            parent: '0',
            child: [{
                id: '5',
                name: 'name 5',
                parent: '2',
                child: [{}]
            }]
        },
        {
            id: '6',
            name: 'name 6',
            parent: '0',
            child: [{}]
        }]
    }
]

const Row = (item, tab) => {
    return (
        <div className="row" key={item.id}>
            <div className="col-md-10">
                {tab + item.name}
            </div>
            <div className="row col-md mx-auto">
                <Link 
                    to={`/edit/${item.id}`} 
                    className="col-md px-0" 
                    title="Edit"
                >
                    Edit
                </Link>
                <button
                    className="col-md px-0"
                    onClick={() => delete (item.id)}
                    title="Delete"
                >
                    Delete>
                </button>
            </div>
        </div>
    )
}

const print = (data, tab) => {
    data.forEach(item => {
        if (Object.keys(item).length === 0) {
            return
        }
        rows.push(Row(item, tab))

        if (item.child && item.child.length > 0) {
            print(item.child, tab + "\t")
        }
    })
}

print(data, '')
return rows