我正在使用 ReactJS 并且我的应用程序的一部分需要漂亮的打印 JSON。
我得到一些 JSON 如下：{ "foo": 1, "bar": 2 }，如果我JSON.stringify(obj, null, 4)在浏览器控制台中运行它，它会打印出来，但是当我在这个react片段中使用它时：
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".
如何正确解释这些字符？{
您需要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'));
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+）
const PrettyPrintJson = React.memo(({data}) => (<div><pre>{
JSON.stringify(data, null, 2) }</pre></div>));
只是稍微扩展一下 WiredPrairie 的答案，一个可以打开和关闭的迷你组件。
可以像这样使用：
<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>
);
}
});
一种更现代的方法（现在 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 { backgroundColor: '#1f4662'; 颜色：'#fff'; 字体大小：'12px'; }
.header { backgroundColor: '#193549'; 填充：'5px 10px'; fontFamily: '等宽'; 颜色：'#ffc600'；}
.pre { 显示：'块'; 填充：'10px 30px'; 边距：'0'; 溢出：'滚动'；}
' react-json-view ' 提供了渲染 json 字符串的解决方案。
import ReactJson from 'react-json-view';
<ReactJson src={my_important_json} theme="monokai" />
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>
}