通过子对象的Javascript递归并以HTML显示

我想显示基于嵌套子对象值的结果。我使用递归函数来实现这一点。根据下面的示例结果，如何将其显示为HTML，我遇到了问题。 我正在使用React.js

现在我使用的是console.log。 这是我的代码：（示例数据在底部）

函数递归（数据、标签）{
如果（！数据）{
返回；
}
for（设a=0；a

将项中的所有叶节点（没有子节点的节点）放入一个数组，然后递归到节点中。然后使用$type将它们连接在一起

const数据=[{
“类型”：“$or”，
“项目”：[
{
“课程id”：“1894”
},
{
“课程id”：“1501”
},
{
“类型”：“$or”，
“项目”：[
{
“课程id”：“7068”
},
{
“课程id”：“7120”
},
{
“课程id”：“7141”
},
{
“类型”：“$and”，
“项目”：[
{
“课程id”：“997”
},
{
“课程id”：“9001”
}
]
}
]
},
{
“类型”：“$or”，
“项目”：[
{
“课程id”：“7256”
},
{
“课程id”：“4534”
}
]
}
]
}]
/*
函数递归（数据、标签）{
如果（！data）{return；}
for（设a=0；a{
让节点=[[]]；
const type=data.type；
data.items.forEach（x=>{
常量leafs=节点[0]；
const isLeaf=！x.items；
如果（isLeaf）叶推（x.course\u id）；
push（递归（x，x.type））；
});
if（节点[0]。长度>0）
节点[0]='（'+节点[0]。联接（${type}'）+'）；
else节点=节点。切片（1）；
让字符串=“”；
string=nodes.join（`\n${type}\n`）；
返回字符串；
};
log（递归（{items:data}））

const unSortedData=[{
“类型”：“$or”，
“项目”：[{
“课程id”：“1894”
},
{
“类型”：“$or”，
“项目”：[{
“课程id”：“7068”
},
{
“课程id”：“7120”
},
{
“课程id”：“7141”
},
{
“类型”：“$and”，
“项目”：[{
“课程id”：“997”
},
{
“课程id”：“9001”
}
]
}
]
},
{
“类型”：“$or”，
“项目”：[{
“课程id”：“7256”
},
{
“课程id”：“4534”
}
]
},
{
“课程id”：“1501”
}
]
},
{
“类型”：“$or”，
“项目”：[{
“课程id”：“1894”
},
{
“类型”：“$or”，
“项目”：[{
“课程id”：“7068”
},
{
“课程id”：“7120”
},
{
“课程id”：“7141”
},
{
“类型”：“$and”，
“项目”：[{
“课程id”：“997”
},
{
“课程id”：“9001”
}
]
}
]
},
{
“类型”：“$or”，
“项目”：[{
“课程id”：“7256”
},
{
“课程id”：“4534”
}
]
},
{
“课程id”：“1501”
}
]
}]
/**为了在两个数据之间分割，我使用了value.type（如果需要）
*您还可以使用自己的分隔符（只需替换
*value.type（根据您的要求）。如果要存储循环的
*项，则可以将其存储到数组中，而不是返回字符串值。
*使用示例而不是dataJoiner
*常数arr=[]；
*内部forEach循环。arr.push（loopItems（value.items，value.type））；
*最后回来，啊。你想怎么办，这完全取决于你自己
*递归项
**/
函数循环数据（数据）{
让dataJoiner=''；
data.forEach（值=>{
dataJoiner=`${dataJoiner}\n${dataJoiner？''+value.type+''：dataJoiner}\n${loopItems（value.items，value.type）}）`；
});	
console.log（dataJoiner）；
返回数据加入器；
};
/**在该方法中，项目按对象类型排序。仅具有
*对课程id进行排序，然后对包含项目的对象进行排序。之后
*使用
*reduce Function它检查项目是否有类型，如果没有类型
*通过将课程id与给定类型连接而累积。无论什么时候
*检测它递归调用loopItems的项的类型，其结果为
*累积到累加器中，即acc
**/
功能循环项（项目
function recursion(items, type = '') {
    let result = [];
    for (let item of items) {
        if (!item.items && !item.type) {
            result.push(item.course_id);
        } else {
            result.push(`(${recursion(item.items, item.type)})`);
        }
    }
    return result.join(` ${type} `);
}

//start here
console.log(recursion(data));