时间戳

首页 > 解决方案 > React native - 使用 MAP 进行迭代

react-native - React native - 使用 MAP 进行迭代

问题描述

不知道出了什么问题，但我有这个 json ......

CONTENT = {
"pages": {
    "p1": {
        "backgroundImage": require("../assets/pageBkgs/p1.png"),
        "backgroundColor": "#FF0000",
        "elements": [
            {
                "jumpTo": {
                    "left": 500,
                    "top": 500,
                    "width": 100,
                    "height": 100,
                    "target": "p3"
                },
                "video" : {
                    "left": 200,
                    "top": 200,
                    "width": 100,
                    "height": 100,
                    "file": require("../assets/videos/limenice.mp4")
                }
            }
        ]
    }

这应该相应地迭代返回：

<View style={styles.pageContainer}>
                {
                    CONTENT.pages[pageKey].elements.map(element => {
                        const type = Object.keys(element).toString()
                        alert(Object.keys(element).toString())
                        switch (type) {
                            case "jumpTo":
                                return JumpTo(Object.values(element)[0], this.executeJumpTo.bind(this), CONTENT.designTime)
                                break
                            case "video":
                                return VideoPlayer(Object.values(element)[0], CONTENT.designTime)
                                break
                            default:
                                return null
                        }
                    })
                }
            </View>)

警报显示：“jumpTo,video”

我正在尝试归档类似...

for(let i=0; i < CONTENT.pages[pageKey].elements.length;i++) {
   switch (Object.keys(CONTENT.pages[pageKey].elements[i]).toString()) {
                        case "jumpTo":
                            return JumpTo(Object.values(element)[0], this.executeJumpTo.bind(this), CONTENT.designTime)
                            break
                        case "video":
                            return VideoPlayer(Object.values(element)[0], CONTENT.designTime)
                            break
                        default:
                            return null
                    }
}

我期待 2 个警报的结果： jumpTo 和 video （而不是用逗号分隔）

有什么线索吗？我认为这是一个基本的函数式编程问题。

标签： react-native

解决方案

要获得两个后续警报：

Object.keys(CONTENT.pages[pageKey].elements).each(type => alert(type));

返回两个后续组件[JumpTo, VideoPlayer]：

{ Object.keys(CONTENT.pages[pageKey].elements).map(type => switch(type) {
     /* your case statements */
}); }

推荐阅读