[英]Pretty Printing JSON with React
I'm using ReactJS and part of my app requires pretty printed JSON.我正在使用 ReactJS 并且我的应用程序的一部分需要漂亮的打印 JSON。
I get some JSON like: { "foo": 1, "bar": 2 }
, and if I run that through JSON.stringify(obj, null, 4)
in the browser console, it pretty prints, but when I use it in this react snippet:我得到一些 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>
);
},
it renders gross JSON that looks like "{ \"foo\": 2, \"bar\": 2}\n"
.它呈现看起来像"{ \"foo\": 2, \"bar\": 2}\n"
的总 JSON 。
How do I get those characters to be interpreted properly?如何正确解释这些字符? { {
You'll need to either insert BR
tag appropriately in the resulting string, or use for example a PRE
tag so that the formatting of the stringify
is retained: 您需要在结果字符串中正确插入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'));
Working example . 工作实例 。
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'));
const PrettyPrintJson = ({data}) => {
// (destructured) data could be a prop for example
return (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>);
}
Or, ... 要么, ...
const PrettyPrintJson = ({data}) => (<div><pre>{
JSON.stringify(data, null, 2) }</pre></div>);
(You might even want to use a memo, 16.6+) (你甚至可能想要使用备忘录,16.6 +)
const PrettyPrintJson = React.memo(({data}) => (<div><pre>{
JSON.stringify(data, null, 2) }</pre></div>));
Just to extend on the WiredPrairie's answer a little, a mini component that can be opened and closed. 只是为了扩展WiredPrairie的答案,一个可以打开和关闭的迷你组件。
Can be used like: 可以像:
<Pretty data={this.state.data}/>
export default React.createClass({
style: {
backgroundColor: '#1f4662',
color: '#fff',
fontSize: '12px',
},
headerStyle: {
backgroundColor: '#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>
);
}
});
A more modern approach (now that createClass is on the way out) 一种更现代的方法(现在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>
)
}
}
And your style file 和你的风格文件
.root { backgroundColor: '#1f4662'; .root {backgroundColor:'#1f4662'; color: '#fff'; 颜色:'#ff'; fontSize: '12px'; fontSize:'12px'; } }
.header { backgroundColor: '#193549'; .header {backgroundColor:'#193549'; padding: '5px 10px'; 填充:'5px 10px'; fontFamily: 'monospace'; fontFamily:'monospace'; color: '#ffc600'; 颜色:'#ffc600'; } }
.pre { display: 'block'; .pre {display:'block'; padding: '10px 30px'; 填充:'10px 30px'; margin: '0'; 保证金:'0'; overflow: 'scroll'; 溢出:'滚动'; } }
The ' react-json-view ' provides solution rendering json string. ' react-json-view '提供了渲染json字符串的解决方案。
import ReactJson from 'react-json-view';
<ReactJson src={my_important_json} theme="monokai" />
Short and Simple简短而简单
<div>
<pre dangerouslySetInnerHTML={{
__html: JSON.stringify(data, null, 2),
}} />
</div>
Here is a demo react_hooks_debug_print.html
in react hooks that is based on Chris's answer. 这是一个基于Chris的回答的反应钩子中的示例react_hooks_debug_print.html
。 The json data example is from https://json.org/example.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>
Or in the following way, add the style into header: 或者按以下方式,将样式添加到标题中:
<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>
And replace DebugPrint
with the follows: 并使用以下代码替换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>
)
Then you can easily use it: 然后你可以轻松使用它:
const Demo = (props) => {
....
return <JSONDisplayer>{someObj}<JSONDisplayer>
}
<pre>{JSON.stringify(data, null, 2)}</pre>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.