用 React 漂亮地打印 JSON

我正在使用 ReactJS，我的应用程序的一部分需要打印漂亮的 JSON。

我得到了一些 JSON，比如: { "foo": 1, "bar": 2 }，如果我在浏览器控制台中通过 JSON.stringify(obj, null, 4)运行它，它会很好地打印出来，但是当我在这个反应片段中使用它时:

render: function() {
var json = this.getStateFromFlux().json;
return (
<div>
<JsonSubmitter onSubmit={this.onSubmit} />
{ JSON.stringify(json, null, 2) }
</div>
);
},

它呈现粗略的 JSON，看起来像 "{ \"foo\" : 2, \"bar\": 2}\n"。

如何正确地解释这些字符? {

233728 次浏览
小开

您需要在生成的字符串中适当地插入 BR标记，或者使用例如 PRE标记，以便保留 stringify的格式:

var data = { a: 1, b: 2 };


var Hello = React.createClass({
render: function() {
return <div><pre>{JSON.stringify(data, null, 2) }</pre></div>;
}
});


React.render(<Hello />, document.getElementById('container'));

工作示例 。

更新

class PrettyPrintJson extends React.Component {
render() {
// data could be a prop for example
// const { data } = this.props;
return (<div><pre>{JSON.stringify(data, null, 2) }</pre></div>);
}
}


ReactDOM.render(<PrettyPrintJson/>, document.getElementById('container'));

Example

无状态功能组件，React.14或更高版本

const PrettyPrintJson = ({data}) => {
// (destructured) data could be a prop for example
return (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>);
}

或者..。

const PrettyPrintJson = ({data}) => (<div><pre>{
JSON.stringify(data, null, 2) }</pre></div>);

举个例子

备忘录/16.6 +

(你甚至可以使用备忘录，16.6 +)

const PrettyPrintJson = React.memo(({data}) => (<div><pre>{
JSON.stringify(data, null, 2) }</pre></div>));
小开

只是延伸一下 WiredPrairie 的答案，一个可以打开和关闭的迷你组件。

可以这样使用:

<Pretty data={this.state.data}/>

enter image description here

export default React.createClass({


style: {
backgroundColor: '#1f4662',
color: '#fff',
fontSize: '12px',
},


headerStyle: {
background-color: '#193549',
padding: '5px 10px',
fontFamily: 'monospace',
color: '#ffc600',
},


preStyle: {
display: 'block',
padding: '10px 30px',
margin: '0',
overflow: 'scroll',
},


getInitialState() {
return {
show: true,
};
},


toggle() {
this.setState({
show: !this.state.show,
});
},


render() {
return (
<div style={this.style}>
<div style={this.headerStyle} onClick={ this.toggle }>
<strong>Pretty Debug</strong>
</div>
{( this.state.show ?
<pre style={this.preStyle}>
{JSON.stringify(this.props.data, null, 2) }
</pre> : false )}
</div>
);
}
});

更新

一种更现代的方法(现在 createClass 已经过时了)

import styles from './DebugPrint.css'


import autoBind from 'react-autobind'
import classNames from 'classnames'
import React from 'react'


export default class DebugPrint extends React.PureComponent {
constructor(props) {
super(props)
autoBind(this)
this.state = {
show: false,
}
}


toggle() {
this.setState({
show: !this.state.show,
});
}


render() {
return (
<div style={styles.root}>
<div style={styles.header} onClick={this.toggle}>
<strong>Debug</strong>
</div>
{this.state.show
? (
<pre style={styles.pre}>
{JSON.stringify(this.props.data, null, 2) }
</pre>
)
: null
}
</div>
)
}
}

还有你的时尚档案

.root {
background-color: #1f4662;
color: #fff;
font-size: 12px;
}


.header {
background-color: #193549;
padding: 5px 10px;
font-family: monospace;
color: #ffc600;
}


.pre {
display: block;
padding: 10px 30px;
margin: 0;
overflow: scroll;
}
小开

“ 反应 Json 观点”提供解决方案呈现 json 字符串。

import ReactJson from 'react-json-view';
<ReactJson src={my_important_json} theme="monokai" />
小开

这里是一个演示 react_hooks_debug_print.html在反应挂钩，是基于克里斯的答案。Json 数据示例来自 https://json.org/example.html。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://raw.githubusercontent.com/cassiozen/React-autobind/master/src/autoBind.js"></script>


<script type="text/babel">


let styles = {
root: { backgroundColor: '#1f4662', color: '#fff', fontSize: '12px', },
header: { backgroundColor: '#193549', padding: '5px 10px', fontFamily: 'monospace', color: '#ffc600', },
pre: { display: 'block', padding: '10px 30px', margin: '0', overflow: 'scroll', }
}


let data = {
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": [
"GML",
"XML"
]
},
"GlossSee": "markup"
}
}
}
}
}


const DebugPrint = () => {
const [show, setShow] = React.useState(false);


return (
<div key={1} style={styles.root}>
<div style={styles.header} onClick={ ()=>{setShow(!show)} }>
<strong>Debug</strong>
</div>
{ show
? (
<pre style={styles.pre}>
{JSON.stringify(data, null, 2) }
</pre>
)
: null
}
</div>
)
}


ReactDOM.render(
<DebugPrint data={data} />,
document.getElementById('root')
);


</script>


</body>
</html>

或者按照以下方式，将样式添加到页眉中:

    <style>
.root { background-color: #1f4662; color: #fff; fontSize: 12px; }
.header { background-color: #193549; padding: 5px 10px; fontFamily: monospace; color: #ffc600; }
.pre { display: block; padding: 10px 30px; margin: 0; overflow: scroll; }
</style>

并将 DebugPrint替换为以下内容:

const DebugPrint = () => {
// https://stackoverflow.com/questions/30765163/pretty-printing-json-with-react
const [show, setShow] = React.useState(false);


return (
<div key={1} className='root'>
<div className='header' onClick={ ()=>{setShow(!show)} }>
<strong>Debug</strong>
</div>
{ show
? (
<pre className='pre'>
{JSON.stringify(data, null, 2) }
</pre>
)
: null
}
</div>
)
}
小开 
const getJsonIndented = (obj) => JSON.stringify(newObj, null, 4).replace(/["{[,\}\]]/g, "")


const JSONDisplayer = ({children}) => (
<div>
<pre>{getJsonIndented(children)}</pre>
</div>
)

然后你可以很容易地使用它:

const Demo = (props) => {
....
return <JSONDisplayer>{someObj}<JSONDisplayer>
}
小开

简单明了

<div>
<pre dangerouslySetInnerHTML=\{\{
__html: JSON.stringify(data, null, 2),
}} />
</div>
小开

TLDR

在 JavaScript 中打印漂亮的 JSON 并做出反应

<pre>{JSON.stringify(data, null, 2)}</pre>

提交答案