Antd:Treeツリー形コントロールデータ解析(JSON変換)

場合によっては、バックグラウンドで転送されたJOSNフォーマットをユーザーに見せる必要があります.この場合は、Json形式のデータをツリー構造に変換するために必要なデータ構造が必要です.
変換が必要なデータ構造:

[{
    "key": key,
    "title": title,
    "children": [{
        "key": key,
        "title": title,
        "children": [{
            "key": subKey,
            "title": subTitle,
        }]
    }]
}]

考え方:
1、まず、value値のデータの種類を判断するための関数が必要です.対象でない場合は、サブ要素がないと説明します.対象であれば、key値childrenを追加して、そのサブ要素を展示し続ける必要があります.

//     
checkDataType(data) {
    let type = null
    if (typeof data === 'object') {
        //   
        if (Object.prototype.toString.call(data) === "[object Null]") {
            // null
            type = 'null'
        } else if (Object.prototype.toString.call(data) === "[object Array]") {
            // []
            type = 'array'
        } else if (Object.prototype.toString.call(data) === "[object Object]") {
            // {}
            type = 'object'
        }
    } else {
        //   null         
        type = 'common'
    }
    return type
}

2、次は私達が欲しいデータ構造に変換します.主に二つの点があります.一つは遍歴のkey値を記憶するために必要な行列です.この配列を通じて対応するkey値の下にchildrenを追加できます.または追加しません.第二の十分な利用対象の特性:名前はスタックメモリに存在し、値はヒープメモリに存在しますが、スタックメモリは参照のアドレスを提供してヒープメモリの値を指します.

verfiedData(data, _prekey, _tns) {
    const tns = _tns || showData
    //           
    let dataType = this.checkDataType(data) 
    switch (dataType) {
        case 'object':
            const children = []
            //   key ，              
            for (let i in data) {
                const key = i
                if (this.checkDataType(data[i]) === 'common' || this.checkDataType(data[i]) === 'null') {
                    tns.push({
                        title: `${key}: ${data[i]}`,
                        key: key
                    })
                    //         ，          ，     
                    children.push('noChild')
                } else {
                    tns.push({
                        title: key,
                        key
                    }) 
                    children.push(key)
                }
            }
            children.forEach((key, index) => {
                //         ，       ，    ，   ，  key  children   ，      
                if (key === 'noChild') {
                    return tns
                } else {
                    tns[index].children = [] 
                    this.verfiedData(data[key], key, tns[index].children)
                }
            }) 
            break;
        case 'array':
            //        key
            data.forEach((value, index) => {
                tns.push({
                    title: index,
                    key: index
                }) 
                tns[index].children = [] 
                this.verfiedData(data[index], index, tns[index].children)
            });
            break;
        default:
            tns.push({
                title: data,
                key: _prekey
            })
    }
}

3、呼び出し

this.verfiedData(certData)

4、デモコードの住所:https://coding.net/u/sunqun/p/react-demo-app を選択します.containersディレクトリ下のTreeファイル