Antd:在文本框中展示格式化JSON

要想将对象转换为格式化 JSON 展示在文本框中,需要用到 JSON.stringify

JSON.stringify 方法接受三个参数:

  • value:必需,一个 JavaScript 值(通常为对象或数组)要转换为 JSON 字符串。
  • replacer:可选,一个函数或数组,用于在序列化过程中过滤或转换值。
  • space:可选,用于在输出 JSON 字符串中添加缩进、空格或换行符,以提高可读性。如果是一个数字,则它表示每个缩进级别的空格数;如果是一个字符串,则该字符串用作每个缩进级别的缩进。

具体代码:

import { Button, Input } from 'antd';export default () => {const value = {name: '张三',age: 20,gender: '男',address: {city: "北京",street: "朝阳路",zipCode: "100000"},phoneNumbers: ["13800000001", "13900000002"],isStudent: true,};const replacerFunc = (key, value) => {if (key === 'phoneNumbers') {return value.map(item => {// 将手机号中间四位替换为占位符return item.slice(0, 3) + '****' + item.slice(7);	})}return value;}const defaultValue = JSON.stringify(value, replacerFunc, 4)return (<Input.TextArea defaultValue={defaultValue}  />)
};

展示效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/310922.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络压缩图像

简介 典型的压缩管道由四个组件组成&#xff1a; 编码&#xff1a;输入图像 x x x通过编码器函数 ε \varepsilon ε&#xff0c;将其转换为潜在表示 z z z。 量化&#xff1a;截断 z z z以丢弃一些不重要的信息 熵编码&#xff1a;使用某种形式的熵编码&#xff08;例如&…

C语言中的数据结构- -链表(1)

前言 前几节我们学习了C语言中的数据结构--顺序表&#xff0c;该数据结构类型相较于普通的数组而言有很多的优势&#xff0c;但是它还是在一定层面上存在着一些缺陷&#xff0c;可以归纳为以下三点&#xff1a; 1. 中间/头部的插⼊删除&#xff0c;时间复杂度为O(N)【数组的遍…

vue3+高德地图(或echarts)+turfjs实现等压线,色斑图(用于显示气象,环境等地图场景)

首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下. 高德官网自行获得key echarts官网 使用turf的isobands api实现. 数据: 需要准备geojson格式经纬度信息业务值(比如温度,高度,光照只要是number值什么数据都可以) 国内各地区geojson数据点这里获得 参考的是这位大佬…

Python GUI开发模块之ttkbootstrap使用详解

概要 在Python的GUI开发中,使用Tkinter是一种常见的选择。 而ttkbootstrap模块则是在Tkinter的基础上提供了更加现代化和美观的界面设计风格,使得开发者可以快速构建出各种吸引人的GUI应用程序。 本文将对ttkbootstrap模块进行深入分析,并结合多种场景下的Python代码案例…

关于伴行天使车载监护器的技术路线

为了判断分析并反馈孩童是否昏睡状态&#xff0c;以预防因分心后排而导致的交通事故&#xff0c;本团队根据基于回归树对齐算法中获取的数据&#xff0c;建立了疲劳度评分机制。 本评分机制采用人脸关键点智能标注模型检测人脸&#xff0c;通过人脸识别68特征点检测、分别获取…

端口映射软件可以做什么? 快解析如何设置端口映射?

说到端口映射&#xff0c;首先说说nat。简单地说&#xff0c;nat就是在局域网内部网络中使用内部地址&#xff0c;而当内部节点要与外部网络进行通讯时&#xff0c;就在网关处&#xff0c;将内部地址替换成公用地址&#xff0c;从而在外部公网&#xff08;internet&#xff09;…

汽车车灯用肖特基二极管,选什么型号好?

肖特基二极管种类繁多&#xff0c;有低压降肖特基二极管、通用型肖特基二极管、快速恢复型肖特基二极管、高功率肖特基二极管、汽车级肖特基二极管等等&#xff0c;其中低压降肖特基二极管和汽车级肖特基二极管是二极管厂家东沃电子的核心优势产品。关于东沃电子推出的低压降肖…

WP免费主题下载

免费wordpress模板下载 高端大气上档次的免费wordpress主题&#xff0c;首页大图全屏显示经典风格的wordpress主题。 https://www.wpniu.com/themes/289.html 免费WP主题 蓝色简洁实用的wordpress免费主题模板&#xff0c;免费主题资源分享给大家。 https://www.wpniu.com/…

【计算机毕业设计】游戏售卖网站——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

基于JSP+Mysql+HTml+Css仓库出入库管理系统设计与实现

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

SpringBoot3 集成Springdoc 实现Swagger3功能

说明&#xff1a; 只通过引用org.springdoc 的两个包就可以使用Swagger3 功能&#xff08;步骤1&#xff09;&#xff1b;如想更美观及实现动态认证的开启与关闭&#xff0c;及Swagger3登录认证等功能&#xff0c;需实现&#xff08;步骤1、2、3&#xff09;的配置; 1、 引包…

python将pdf转为docx

如何使用python实现将pdf文件转为docx文件 1.首先要安装pdf2docx库 pip install pdf2docx2.实现转换 from pdf2docx import Converterdef convert_pdf_to_docx(input_pdf, output_docx):# 创建一个PDF转换器对象pdf_converter Converter(input_pdf)# 将PDF转换为docx文件pdf…

Qt nodeeditor ROI 组态软件

节点显示节点连接属性设置插件导入导出 展示&#xff1a;

谷歌浏览器的开发者插件vue-devtools

在这里我留下一个git地址用来下载插件包&#xff0c;首先在自己喜欢的位置创建一个新的文件夹&#xff0c;起一个自己喜欢的文件夹名字&#xff0c;下载到包后&#xff0c;然后点进文件夹里下载依赖&#xff0c;npm install,下载后如下面这个样子 git clone https://gitee.com…

【40分钟速成智能风控16】模型训练

目录 ​编辑 模型训练 逻辑回归 XGBoost Wide&Deep 模型部署 模型训练 确定了最终的入模变量&#xff0c;终于进入模型训练的环节了&#xff0c;在这个环节我们需要选定模型结构&#xff0c;调节模型超参数&#xff0c;以及评估模型的效果。为了得到一个兼具区分度和…

C#引用外部组件的常用方法

我们在开发程序过程中&#xff0c;时常会使用到第三方组件&#xff0c;比如一些通信、UI组件等。常用的引用方法有下面几种。 01 NuGet引用 NuGet是.NET的一个包管理平台&#xff0c;很多开源组件会通过NuGet进行管理和发布。比如我们常用的S7NetPlus等。 从NuGet中引用组件…

k8s高可用集群部署介绍 -- 理论

部署官网参考文档 负载均衡参考 官网两种部署模式拓扑图和介绍 介绍两种高可用模式 堆叠 拓扑图如下&#xff08;图片来自k8s官网&#xff09;&#xff1a; 特点&#xff1a;将etcd数据库作为控制平台的一员&#xff0c;由于etcd的共识算法&#xff0c;所以集群最少为3个&…

访问者模式【行为模式C++】

1.概述 访问者模式是一种行为设计模式&#xff0c; 它能将算法与其所作用的对象隔离开来。 访问者模式主要解决的是数据与算法的耦合问题&#xff0c;尤其是在数据结构比较稳定&#xff0c;而算法多变的情况下。为了不污染数据本身&#xff0c;访问者会将多种算法独立归档&…

韩顺平 | 零基础快速学Python(16) 文件处理

文件 输入与输出 输入&#xff1a;数据从数据源(文件)到程序(内存)&#xff1b; 输出&#xff1a;数据从程序(内存)到数据源(文件)。 #mermaid-svg-06PG6JZq4jJMV1oH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-sv…

如何使用Docker部署Django项目?

第一步&#xff1a;创建Dockerfile文件 在django项目的根目录中创建一个名为Dockerfile的文件&#xff0c;并写入如下配置&#xff1a; # 使用 Python 3.12 作为基础镜像 FROM python:3.12# 设置工作目录 WORKDIR /app# 复制项目文件到工作目录 COPY . /app# 设置清华 pip 镜…