React如何基于嵌套JSON生成带层级分组的树形select下拉选择器

原代码存在的问题 #

• 字符串拼接逻辑缺失：生成的子节点内容、<optgroup>闭合标签都没有拼接进结果变量，实际输出只有开头的<optgroup>标签
• 遍历提前终止：getOptionChilds方法中只要遇到带children属性的子节点就直接return，会中断当前层级的遍历，导致同层级后续节点完全不会被处理
• 初始值错误：结果变量初始化为null，字符串拼接时会自动转为"null"字符串，污染输出内容
• 缺失最外层<select>标签的包裹逻辑
• 如果你是直接生成HTML字符串，不需要加模板语法的{}包裹变量，直接拼接变量值即可

修正后代码 #

// 调用入口
console.log(this.generateSelect(data))

// 生成完整select结构
generateSelect(root) {
    let result = '<select>'
    result += this.traverseNode(root)
    result += '</select>'
    return result
}

// 递归遍历单个节点
traverseNode(node) {
    let html = ''
    // 有子节点的节点作为optgroup
    if (node.children && node.children.length > 0) {
        html += `<optgroup label="${node.title}">`
        // 遍历所有子节点
        node.children.forEach(child => {
            html += this.traverseNode(child)
        })
        html += '</optgroup>'
    } else {
        // 没有子节点的作为option
        html += `<option value="${node.id}">${node.title}</option>`
    }
    return html
}

上述代码采用深度优先递归遍历所有节点，有子节点的节点生成optgroup标签，无子节点的节点生成option标签，不会遗漏任何节点，生成的结构完全匹配你需要的输出效果。

内容的提问来源于stack exchange，提问作者S.M_Emamian