首页 > 其他分享 >利用react-json-view最JSON数据进行渲染

利用react-json-view最JSON数据进行渲染

时间:2023-06-19 16:58:36浏览次数:54  
标签:06c634eea567252a charset json react JSON b3 view

1.安装

npm install --save react-json-view

2.使用

import ReactJson from "react-json-view";

const A = () => {
  let src = {
    "content-length": "675",
    "x-b3-parentspanid": "06c634eea567252a",
    "x-b3-traceid": "06c634eea567252a",
    "x-b3-spanid": "7a18e4d5ccd7906e",
    "x-b3-sampled": "1",
    host: "cagent",
    "content-type": "application/json;charset=UTF-8",
    accept: "application/json;charset=UTF-8",
    "user-agent": "Java/1.8.0_102"
  };
  return (
    <ReactJson
      src={src}
      name={false}
      collapsed={1}
      displayDataTypes={false}
      displayObjectSize={false}
      enableClipboard={false}
      iconStyle="square"
    />
  );
};

3.效果展示

image

参考链接

https://www.cnblogs.com/aleifighting/p/15100210.html

标签:06c634eea567252a,charset,json,react,JSON,b3,view
From: https://www.cnblogs.com/domin520Jian/p/17491525.html

相关文章

  • Mongodb 为什么提起处理JSON 就是MOGNODB 的,因为我没得选
    提到JSON的数据处理,大部分人想到的一定是MONGODB,如果不是可以自己好好的反思一下,自己的数据库餐盘是不是缺少MOGNODB这道硬菜,最近也有人问我一个问题,关于使用mongodb的原因是什么,我回答的比较简单,但是我更原因用这样的方式来回答这个问题。提到MOGNODB的特长,必须提到JSON,在数......
  • ReactRouter6
    ReactRouter6官方文档概述ReactRouter发布了三个不同的包:react-router:路由核心库,提供许多组件、钩子react-router-dom:包括了react-router所有内容,同时添加了用于DOM的组件,如<BrowserRouter>react-router-native:包括了react-router所有内容,同时添加了用于React......
  • vite+vue3项目中使用 lottie 动画,如何在 template 中直接使用本地 json 文件路径
    安装lottie-webyarnaddlottie-web封装 lottie组件<template><divref="animation":style="{width,height}"></div></template><script>import{defineComponent,ref,onMounted}from'vue'......
  • 关于ASP.NET.CORE中的Failed to read parameter "string param" from the request bod
    先上报错信息Microsoft.AspNetCore.Http.BadHttpRequestException:Failedtoreadparameter"stringparam"fromtherequestbodyasJSON.--->System.Text.Json.JsonException:'s'isaninvalidstartofavalue.Path:$|LineNumber:0|By......
  • react 进度条
    最终结果图还是直接上代码哈,我这里直接用的react的hook写的,最近这一年没怎么有时间更新博客,这两年我换技术栈了,换成react了,中间写了很多组件,后面我有空了全部都更新出来吧,不过都是react的哦,当然有时候vue也在使用哈,一般我都是直接上代码,不存在过多的讲解,因为不是特别难的代码,一......
  • 关于前后端JSON解析差异问题与思考
    本文主要总结了作者在一次涉及流程表单的需求发布中遇到的问题及思考总结。 一、问题回顾在一次涉及流程表单的需求发布时,由于表单设计的改动,需要在历史工单中的一个json字段增加一个属性,效果示意如下:[{"key1":"value1"}]->[{"key1":"value1","key2":"value2"}]......
  • 关于前后端JSON解析差异问题与思考
    本文主要总结了作者在一次涉及流程表单的需求发布中遇到的问题及思考总结。 一、问题回顾在一次涉及流程表单的需求发布时,由于表单设计的改动,需要在历史工单中的一个json字段增加一个属性,效果示意如下:[{"key1":"value1"}]->[{"key1":"value1","key2":"value2"}]......
  • React SSR - 写个 Demo 一学就会
    ReactSSR-写个Demo一学就会今天写个小Demo来从头实现一下react的SSR,帮助理解SSR是如何实现的,有什么细节。什么是SSRSSR即ServerSideRendering服务端渲染,是指将网页内容在服务器端中生成并发送到浏览器的技术。相比于客户端渲染(CSR),SSR一般用于以下场景:SEO......
  • React - 07 类组件的渲染逻辑
    1.ES6类的知识ES6类的继承2.创建类组件创建类组件创建一个构造函数(类)+要求必须继承React.Component/PureComponent这个类+我们习惯于使用ES6中的class创建类「因为方便」+必须给当前类设置一个render的方法「放在其原型上」:在render方法中,返回需要渲染的......
  • Delphi 用TDatasetToJSONBridge原生支持DataSet导出Json
    Xalion发现data.DBJson单元,不知什么时候加的,官方帮助中也没有写。procedureTForm18.Button2Click(Sender:TObject);varcV:TDatasetToJSONBridge;jo:Tjsonobject;begincV:=TDatasetToJSONBridge.Create;trycV.Dataset:=mt;jo:=Tjsonobject(cV.Pro......