Question

不知道怎么了，但是我有这个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>)

警报显示：“跳转到视频”

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

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（而不是都用逗号分隔）

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

Answer 1

要获取两个后续警报：

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 */
}); }

React Native-使用MAP进行迭代

1 个答案: