爱奇艺网站建设费,来个网站吧好人一生平安,网站开发seo规范,推广链接点击器文章目录 一、前言1.1、在线demo1.2、Github仓库 二、实践2.1、安装react-json-view2.2、组件封装2.3、效果2.4、参数详解2.4.1、src(必须) #xff1a;JSON Object2.4.2、name#xff1a;string或false2.4.3、theme#xff1a;string2.4.4、style#xff1a;object2.4.5、… 文章目录 一、前言1.1、在线demo1.2、Github仓库 二、实践2.1、安装react-json-view2.2、组件封装2.3、效果2.4、参数详解2.4.1、src(必须) JSON Object2.4.2、namestring或false2.4.3、themestring2.4.4、styleobject2.4.5、iconStylestring2.4.6、indentWidthinteger2.4.7、collapsedboolean2.4.8、collapseStringsAfterLengthboolean2.4.9、shouldCollapse(field){}2.4.10、displayObjectSizeboolean2.4.11、displayDataTypesboolean2.4.12、onEdit(edit){}2.4.13、onAdd(add){}2.4.14、onDelete(delete){}2.4.15、onSelect(select){} 三、最后 一、前言
react-json-viewRJV是一个用于显示和编辑javascript数组和JSON对象的React组件。
1.1、在线demo 1.2、Github仓库 二、实践
2.1、安装react-json-view
安装插件在这推荐大家在项目中用 yarn 安装插件yarn的出错几率比npm低很多。
npm install --save react-json-view
// 或者
yarn react-json-view2.2、组件封装
/*** Description: 格式化显示json数据 react-json-view* github https://github.com/mac-s-g/react-json-view* demo https://mac-s-g.github.io/react-json-view/demo/dist/* author 小马甲丫* date 2023-12-06 01:26:47*/
import ReactJsonView from react-json-view;const ReactJson (props) {return (ReactJsonViewname{false} // 根节点名字collapsed{false} // 是否收起,true为收起indentWidth{4} // 缩进iconStyletrianglesrc{props.value}themegrayscale:invertedenableClipboard // 点击向左箭头进行复制displayObjectSize{false} // 显示有多少个items属性displayDataTypes{false} // 显示值的类型sortKeys // 键的排序quotesOnKeys{false} // 是否显示a键的引号/);
};export default ReactJson;2.3、效果
传入的数据是数组如下所示 2.4、参数详解
2.4.1、src(必须) JSON Object
默认值无
需要展示的JSON数据
2.4.2、namestring或false
默认值root
JSON数据的根节点(用默认或指定的根节点包裹自己的数据)使用null或false没有名字
2.4.3、themestring
默认值rjv-default
RJV支持base-16主题
2.4.4、styleobject
默认值{}
可以通过style添加、修改样式可覆盖主题默认提供的属性
2.4.5、iconStylestring
默认值triangle
接受参数circle(圆)、triangle(三角形)、square(圆)
2.4.6、indentWidthinteger
默认值4
JSON嵌套对象的缩进值
2.4.7、collapsedboolean
默认值false
当设置为true默认情况下所有节点都将被折叠。使用整数值在特定深度折叠。
2.4.8、collapseStringsAfterLengthboolean
默认值false
这个就是超出内容会变成…的功能。当一个整数值被赋值时字符串就会在这个长度后面接上省略号。可以通过单击字符串值来展开和折叠字符串内容
2.4.9、shouldCollapse(field){}
默认值false
回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src, type(“数组”或“对象”)和namespace
2.4.10、displayObjectSizeboolean
默认值true
当设置为true对象和数组被标记为大小。例如: { a: a1,b: b1 }会显示2 items
2.4.11、displayDataTypesboolean
默认值true
当设置为true数据类型会出现在数据的前缀值.例如: { a: 123, b: b1}会显示{ a: int 123, b: string b1}
2.4.12、onEdit(edit){}
默认值false
当传入回调函数时edit功能已启用。在编辑完成之后调用回调。
2.4.13、onAdd(add){}
默认值false
当传入回调函数时add功能已启用。在完成添加之后调用回调。
2.4.14、onDelete(delete){}
默认值false
当传入回调函数时delete功能已启用。在完成删除之后调用回调。
2.4.15、onSelect(select){}
默认值false
当传入函数时单击值将触发onSelect方法将被调用。
三、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。创作不易给我打打气加加油☕
