官方定义: RJV is a React component for displaying and editing javascript arrays and JSON objects.
译: RJV是一个用于显示和编辑javascript数组和JSON对象的React组件
从字面意思上可知,它本质上是一个组件,和我们平时使用的自定义组件没有任何区别。只是它被作者封装固定好了相应的属性。下面我列举一下RJV常用的属性和功能
属性名值类型默认值描述src(必须)JSON Object无需要展示的JSON数据namestring或falserootJSON数据的根节点(用默认或指定的根节点包裹自己的数据),使用null或false没有名字themestringrjv-defaultRJV支持base-16主题。具体的看后面styleobject{}可以通过style添加、修改样式,可覆盖主题默认提供的属性iconStylestringtriangle接受参数:circle(圆)、triangle(三角形)、square(圆)indentWidthinteger(整数)4JSON嵌套对象的缩进值collapsedboolean或integerfalse当设置为true，默认情况下，所有节点都将被折叠。使用整数值在特定深度折叠。collapseStringsAfterLengthintegerfalse这个就是超出内容会变成...的功能。当一个整数值被赋值时，字符串就会在这个长度后面接上省略号。可以通过单击字符串值来展开和折叠字符串内容shouldCollapse(field)=>{}false回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src, type(“数组”或“对象”)和namespacedisplayObjectSizebooleantrue当设置为true，对象和数组被标记为大小。例如: { a: 'a1',b: 'b1' },会显示2 itemsdisplayDataTypesbooleantrue当设置为true，数据类型会出现在数据的前缀值.例如: { a: 123, b: 'b1'},会显示{ a: int 123, b: string 'b1'}onEdit(edit)=>{}false当传入回调函数时，edit功能已启用。在编辑完成之前调用回调。详见《rjv-onEdit》onAdd(add)=>{}false当传入回调函数时，add功能已启用。在完成添加之前调用回调。《rjv-onAdd》onDelete(delete)=>{}false }当传入回调函数时，delete功能已启用。在完成删除之前调用回调。《rjv-onDelete》onSelect(select)=>{}false当传入函数时，单击值将触发onSelect方法将被调用。二、用法前面说了RJV是一个封装好的自定义组件.那么我们只需要你根据业务情况设置相应的属性即可.下面我们一起熟悉一下RJV常用的一些重要属性。
为了方便起见,我就直接运行create-react-app rjv_react,在react的脚手架构建的默认项目上面修改
步骤一: 引用安装引入react-json-view
//终端npm install -D react-json-view//codeimport ReactJson from 'react-json-view'步骤二: 实现界面样式、逻辑初始化初始化状态:
为了简便,样式我就不贴出来了。我们简单看一下组件
import React from 'react'import ReactJson from 'react-json-view'import './App.css'export default class ReactJsonView extends React.Component{constructor(props){super(props)this.state = {mockJson:''}this.handleChange = this.handleChange.bind(this)}//改变textarea内容handleChange(e){this.setState({mockJson: e.target.value,})}render(){let { mockJson } = this.state;mockJson = mockJson.length ? JSON.parse(mockJson) : {"test":123,"test1":"value"}return(左侧输入 下面显示)}}页面逻辑很简单:
如果用户未输入内容,则默认使用初始化数据渲染用户输入内容的时候,触发onChange事件,改变src里的内容用的是最简单的形式,只有一个src属性当然,组件可以不添加src属性打开控制台,会发现一个警告.虽然不会阻塞页面渲染,但是也没有存在的意义
另外,这里推荐一个非常好用的JSON格式处理网站: 《Code Beautify》
各属性解析name属性: string 或 null || falsename用来改变根节点名字,使用不要太简单
可以用组件指定的主题,也可以用base-16定制(作者的另一个开源项目:《base16》)
感兴趣的同学可以研究一下base16.这里我用组件指定的一些主题
