如何在本机反应中传递地图答案

【问题标题】：How to pass a map in react native如何在本机反应中传递地图
【发布时间】：2020-11-25 22:49:36
【问题描述】：

我正在构建一个聊天，需要将键“按钮”内的数据作为 Prop 传递给组件。谁能澄清我应该怎么做？我不知道在这种情况下使用的确切 PropType 是什么。这是我想要获取数据的响应的 json：

{
"answer": {
    "key": "1605009993OpdNRfNx",
    "name": "Text message example",
    "modules": [null, {
        "position": 1,
        "text": "Text message description",
        "textHTML": "Text message description",
        "type": "text",
        "buttons": {
            "1605010005zDRgizhW": {
                "key": "1605010005zDRgizhW",
                "payload": "1605009983S6UBYapR",
                "position": 1,
                "text": "button 1"
            },
            "16050100433baadqRu": {
                "key": "16050100433baadqRu",
                "payload": "1605010037bRkMrp9V",
                "position": 2,
                "text": "button 2"
            }
        }
    }]
}

}

提前致谢

【问题讨论】：

标签： react-native react-props react-component

【解决方案1】：

解析 json，然后拉出名为“buttons”的对象。之后，将按钮对象传递给子组件。

这是一个例子：

App.js

import React from 'react';
import {View} from "react-native";
import TestComponent from "./TestComponent";

const jsonData = "{\n" +
    "\"answer\": {\n" +
    "    \"key\": \"1605009993OpdNRfNx\",\n" +
    "    \"name\": \"Text message example\",\n" +
    "    \"modules\": [null, {\n" +
    "        \"position\": 1,\n" +
    "        \"text\": \"Text message description\",\n" +
    "        \"textHTML\": \"Text message description\",\n" +
    "        \"type\": \"text\",\n" +
    "        \"buttons\": {\n" +
    "            \"1605010005zDRgizhW\": {\n" +
    "                \"key\": \"1605010005zDRgizhW\",\n" +
    "                \"payload\": \"1605009983S6UBYapR\",\n" +
    "                \"position\": 1,\n" +
    "                \"text\": \"button 1\"\n" +
    "            },\n" +
    "            \"16050100433baadqRu\": {\n" +
    "                \"key\": \"16050100433baadqRu\",\n" +
    "                \"payload\": \"1605010037bRkMrp9V\",\n" +
    "                \"position\": 2,\n" +
    "                \"text\": \"button 2\"\n" +
    "            }\n" +
    "        }\n" +
    "    }]\n" +
    "}\n" +
    "}"

export default function App() {

    const data = JSON.parse(jsonData);
    const buttons = data.answer.modules[1].buttons;


    return (
        <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
            <TestComponent buttons={buttons} />
        </View>
    );
}

TestComponent.js

import React from "react";
import {View, StyleSheet, Button} from "react-native";

const TestComponent = props => {

    const { buttons } = props;

    const onPressHandler = () => {
        console.log(buttons);
    }

    return (
        <View>
            <Button title={"Press Me."} onPress={onPressHandler} />
        </View>
    );
};

export default TestComponent;

【讨论】：