【RN】迭代且动态构建 Pair[Key, Value]

目录

一. 问题

二. 实例

三. 参考

---

一. 问题

        最近需要迭代一个数组或字典生成一个个 Cell View，然后忘记咋写这个结构了，整理一下之前的，记录下来。

二. 实例

重点:  Key-Value，键值对中的各个数据结构关联起来;

        let cds: { [key: string]: string } = {
            'name': '姓名', 'age': '年龄', 'address': '地址'
        }

        let dataSet: { [key: string]: any } = {
            'name': '生产队的驴',
            'age': 19,
            'address': '北京市'
        }
        Object.keys(cds).map((key, index, array) => {
            let item_key = cds[key] // the cell left unit or region
            // 判断 dateSet 数据结构中，是否还有 cds 中的 ['name', 'age', 'address'] 字段，也就是key 的值
            if (Object.prototype.hasOwnProperty.call(dataSet, key) && item_key.length > 0) {
                let item_value = dataSet[key] // the cell right unit or region
                return (<View>
                    <Text style={[{
                        color: '#999999FF',
                        fontSize: 14,
                    }]}>{item_key}</Text>
                    <Text style={[{
                        color: '#666666FF',
                        fontSize: 14,
                    }]}>{item_value}</Text>
                </View>)
            } else {
                return (<View />)
            }
        }, this)

说明:

// 如果平常使用过程中，dataSet 属于特定类，只要保证dataSet 继承如下结构即可

export interface Keys {
    [key: string]: any
}

三. 参考

1. JavaScript 参考 - JavaScript | MDN
2. Object - JavaScript | MDN
3. Object.keys() - JavaScript | MDN
4. Object.prototype.hasOwnProperty() - JavaScript | MDN
5. Object.getOwnPropertyNames() - JavaScript | MDN