如何使用json动态创建一个react组件并解析具有多级层次结构的json数据，使用react设计ui

Question

我有一个很大的 json 数据，我从一个 api 调用中得到，我不知道如何显示这个 usng react ui，json 数据 wi

 {
    "products": [
        {
            "id": "812abcdefgh",
            "sku": "SKU-00000abcd",
            "name": "ABC",
            "description": null,
            "category": "Base Products",
            "effectiveStartDate": "2019-01-01",
            "effectiveEndDate": "2099-12-31",
            "allowFeatureChanges": false,
            "Hello__c": "First ",
            "productRatePlans": [
                {
                    "id": "81abcdefgh",
                    "status": "Active",
                    "name": "Bronze",
                    "description": null,
                    "effectiveStartDate": "2019-01-01",
                    "effectiveEndDate": "2099-12-31",
                    "productRatePlanCharges": [
                        {
                            "id": "8abcdefgh",
                            "name": "platform fee",
                            "type": "Recurring",
                            "model": "FlatFee",
                            "uom": null,
                            "pricingSummary": [
                                "USD500",
                                "MYR2000"
                            ],
                            "pricing": [
                                {
                                    "currency": "USD",
                                    "price": 500
                                },
                                {
                                    "currency": "MYR",
                                    "discountPercentage": null,
                                    "discountAmount": null
                                }
                            ],
                            "defaultQuantity": null
                            "billingDay": "DefaultFromCustomer",
                            "listPriceBase": "Per_Month"
                            "financeInformation": {
                                "deferredRevenueAccountingCode": "Product Deferred Revenue"
                            }
                        }
                    ]
                }
            ],
            "productFeatures": []
        }
    ],
    "nextPage": "/v1/catalog/products?page=3&pageSize=1",
    "success": true
}

会是这样的

我应该使用 React UI 和 Bootstrap 显示这个 Json 数据，我是 React 的新手，不知道该怎么做，面临很多问题，无法完成

Answer 1

你可以使用 pre 和 JSON.stringify()

import React from "react";

const jsonData = {
  // your JSON data here
};

const JsonDisplay = () => {
  return (
    <pre>
      {JSON.stringify(jsonData, null, 2)}
    </pre>
  );
};

export default JsonDisplay;