JSON数据展⽰神器：react-json-view（常⽤于后台⽹站）
⼀、react-json-view - npm
官⽅定义: RJV is a React component for displaying and editing javascript arrays and JSON objects.
译: RJV是⼀个⽤于显⽰和编辑javascript数组和JSON对象的React组件
从字⾯意思上可知，它本质上是⼀个组件，和我们平时使⽤的⾃定义组件没有任何区别。只是它被作者封装固定好了相应的属性。下⾯我列举⼀下RJV常⽤的属性和功能
属性名值类型默认值描述
src(必须)JSON
Object⽆需要展⽰的JSON数据
name string或
false
root JSON数据的根节点(⽤默认或指定的根节点包裹⾃⼰的数据)，使⽤null或false没有名字
theme string
rjv-
default
RJV⽀持base-16主题。具体的看后⾯
style object{}可以通过style添加、修改样式，可覆盖主题默认提供的属性iconStyle string triangle接受参数:circle(圆)、triangle(三⾓形)、square(圆)
indentWidth integer(整
数)
4JSON嵌套对象的缩进值
collapsed boolean或
integer
false当设置为true，默认情况下，所有节点都将被折叠。使⽤整数值在特定深度折叠。
collapseStringsAfterLength integer false这个就是超出内容会变成...的功能。当⼀个整数值被赋值时，字符串就会在这个长度后⾯接
上省略号。可以通过单击字符串值来展开和折叠字符串内容
shouldCollapse(field)=>{}false回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src,
type(“数组”或“对象”)和namespace displayObjectSize boolean true当设置为true，对象和数组被标记为⼤⼩。例如: { a: 'a1',b: 'b1' }，会显⽰2 items
displayDataTypes boolean true当设置为true，数据类型会出现在数据的前缀值.例如: { a: 123, b: 'b1'}，会显⽰{ a: int 123, b:
string 'b1'}
onEdit(edit)=>{}false当传⼊回调函数时，edit功能已启⽤。在编辑完成之前调⽤回调。详见
onAdd(add)=>{}false当传⼊回调函数时，add功能已启⽤。在完成添加之前调⽤回调。
onDelete (delete)=>
{}
false }当传⼊回调函数时，delete功能已启⽤。在完成删除之前调⽤回调。
onSelect (select)=>
{}
false当传⼊函数时，单击值将触发onSelect⽅法将被调⽤。
⼆、⽤法
前⾯说了RJV是⼀个封装好的⾃定义组件.那么我们只需要你根据业务情况设置相应的属性即可.下⾯我们⼀起熟悉⼀下RJV常⽤的⼀些重要属性。
为了⽅便起见，我就直接运⾏create-react-app rjv_react，在react的脚⼿架构建的默认项⽬上⾯修改
步骤⼀: 引⽤
安装引⼊react-json-view
//终端
npm install -D react-json-view
//code
import ReactJson from 'react-json-view'json值的类型有哪些
<ReactJson src={jsonData} />
步骤⼆: 实现
界⾯样式、逻辑初始化
初始化状态:
为了简便，样式我就不贴出来了。我们简单看⼀下<ReactJson />组件
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(
<div style={{marginTop: 15}}>
<div>
<textarea placeholder="请输⼊JSON数据" onChange={this.handleChange} className="mockTextarea"></textarea>                    <span style={{fontSize: 12}}>左侧输⼊下⾯显⽰</span>
</div>
<div  className="modal">
<ReactJson src={mockJson}/>
</div>
</div>
)
}
}
页⾯逻辑很简单:
初始化数据渲染
如果⽤户未输⼊内容，则默认使⽤初始化数据
⽤户输⼊内容的时候，触发onChange事件，改变<ReactJson />src⾥的内容
<ReactJson />⽤的是最简单的形式，只有⼀个src属性
当然，组件可以不添加src属性
打开控制台，会发现⼀个警告.虽然不会阻塞页⾯渲染，但是也没有存在的意义
另外，这⾥推荐⼀个⾮常好⽤的JSON格式处理⽹站:
各属性解析
name属性: string 或 null || false
name⽤来改变根节点名字，使⽤不要太简单
<ReactJson src={mockJson} name="$" />
<ReactJson src={mockJson} name={null} />
theme属性: string
<ReactJson />可以⽤组件指定的主题，也可以⽤base-16定制(作者的另⼀个开源项⽬:)
感兴趣的同学可以研究⼀下base16.这⾥我⽤组件指定的⼀些主题
<ReactJson src={mockJson} theme="google"/>
更多主题，可以查看
style属性: object
实际上就是react组件的style，我们只需要按照react的写法即可。另外值得注意的是,style会覆盖theme主题的属性
<ReactJson src={mockJson} style={{backgroundColor: '#888'}} theme="google"/>
iconStyle属性: string
这个指的是最根部(root)折叠/展开显⽰的icon类型.默认是triangle(三⾓形)。官⽅⽂档显⽰square是默认，应该弄错了. <ReactJson src={mockJson} />
<ReactJson src={mockJson} iconStyle="circle"/>
<ReactJson src={mockJson} iconStyle="square"/>
indentWidth属性: integer(整数)
实际上修改的是⼦节点的padding-left值，每⼀个值代表5px，默认值为4
即4 * 5px = 20px;
<ReactJson src={mockJson} />
<ReactJson src={mockJson} indentWidth={16}/>
collapsed属性: boolean 或 integer
很经常使⽤的⼀个属性，有时候因为json数据太长，导致展⽰太多不⽅便，就需要⽤到collapsed属性控制.
默认是false全展开，设置true全部关闭，可以指定⼀个integer表⽰展开的深度
//为了更好显⽰效果，我把数据加到了2层
<ReactJson src={mockJson} />
<ReactJson src={mockJson} collapsed={true}/>
<ReactJson src={mockJson} collapsed={1}/>
collapseStringsAfterLength属性: integer
内容过长,⽤...代替,⾮常好的⼀个属性.就不⽤头疼数据太长如果缩减展⽰了。
当然，你可以通过点击省略的内容，组件会完整展开这个JSON数据
enableClipboard属性: 是否可以复制
默认是可以复制的(true)
<ReactJson src={mockJson} />
<ReactJson src={mockJson} enableClipboard={false} />
复制还会触发⼀个回调函数
此外，复制
<ReactJson src={mockJson} enableClipboard={this.handleCopy}/>
handleCopy(copy){
console.log(copy)
}
点击test节点，打印如下:
displayObjectSize和displayDataTypes: boolean
这两个不作太多解释, 是否呈现⼦节点数量和⼦节点类型.
如果希望数据简洁，可以都选择false
<ReactJson src={mockJson}/>
<ReactJson src={mockJson} displayDataTypes={false}  displayObjectSize={false}/>
onEdit、onAdd、onDelete、onSelect属性: function
这四个属性⽐较类似，都是⽤户操作后触发的回调函数，默认是false，即不触发.
如果加上相应的事件,⽤户可以在相应的JSON数据右侧触发
<ReactJson src={mockJson}/>
<ReactJson src={mockJson} onAdd={this.handleAdd}/>
<ReactJson src={mockJson} onEdit={this.handleEdit}/>
<ReactJson src={mockJson} onDelete={this.handleDelete}/>
<ReactJson src={mockJson} onSelect={this.handleSelect}/>
i. onAdd事件
handleAdd = (add) => {
console.log('add =======>', add)
}
ii. onEdit事件
handleEdit = (edit) => {
console.log('edit =======>', edit)
}
iii. onDelete事件
handleDelete = (deleteCont) => {
console.log('delete =======>', deleteCont)
}
iiii. onSelect事件
handleSelect = (select) => {
console.log('select ======>', select)
}
三、总结
react-json-view这个开源项⽬真的蛮好⽤的。如果你是⽤react开发的,⽽且⼜经常和后台系统打交道，那么赶紧把这个插件收⼊囊中吧！总有⼀天你会⽤到的。
你也可以把本⽂当作是⼀个简单⽂档作为查阅.有什么解释不清楚、错误的地⽅，欢迎指出
作者更新/维护，可以及时在查阅

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。