Saya menggunakan ReactJS dan sebagian aplikasi saya membutuhkan JSON yang cukup dicetak.
Saya mendapatkan beberapa JSON seperti:, { "foo": 1, "bar": 2 }
dan jika saya menjalankannya JSON.stringify(obj, null, 4)
di konsol browser, hasilnya bagus, tetapi ketika saya menggunakannya dalam cuplikan reaksi ini:
render: function() {
var json = this.getStateFromFlux().json;
return (
<div>
<JsonSubmitter onSubmit={this.onSubmit} />
{ JSON.stringify(json, null, 2) }
</div>
);
},
itu membuat JSON kasar yang terlihat "{ \"foo\" : 2, \"bar\": 2}\n"
.
Bagaimana cara agar karakter tersebut diinterpretasikan dengan benar? {
javascript
json
reactjs
flux
Brandon
sumber
sumber
JSON.stringify(json, null, "\t")
?this.getStateFromFlux().json
sudah mengembalikan string. Saya memodifikasinya untuk menahan objek JS, dan sekarang berfungsi dengan sempurna.Jawaban:
Anda harus menyisipkan
BR
tag dengan tepat di string yang dihasilkan, atau menggunakan, misalnya,PRE
tag sehingga pemformatanstringify
dipertahankan: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'));
Contoh kerja .
Memperbarui
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'));
Komponen Fungsional Stateless, React .14 atau lebih tinggi
const PrettyPrintJson = ({data}) => { // (destructured) data could be a prop for example return (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>); }
Atau, ...
const PrettyPrintJson = ({data}) => (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>);
Contoh kerja
Memo / 16.6+
(Anda bahkan mungkin ingin menggunakan memo, 16.6+)
const PrettyPrintJson = React.memo(({data}) => (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>));
sumber
Sekadar memperluas jawaban WiredPrairie sedikit, komponen mini yang bisa dibuka dan ditutup.
Dapat digunakan seperti:
<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> ); } });
Memperbarui
Pendekatan yang lebih modern (sekarang setelah createClass keluar)
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> ) } }
Dan file gaya Anda
.root {backgroundColor: '# 1f4662'; warna: '#fff'; fontSize: '12px'; }
.header {backgroundColor: '# 193549'; padding: '5px 10px'; fontFamily: 'monospace'; warna: '# ffc600'; }
.pre {display: 'block'; padding: '10px 30px'; margin: '0'; overflow: 'scroll'; }
sumber
' React-json-view ' menyediakan solusi rendering string json.
import ReactJson from 'react-json-view'; <ReactJson src={my_important_json} theme="monokai" />
sumber
const getJsonIndented = (obj) => JSON.stringify(newObj, null, 4).replace(/["{[,\}\]]/g, "") const JSONDisplayer = ({children}) => ( <div> <pre>{getJsonIndented(children)}</pre> </div> )
Kemudian Anda dapat dengan mudah menggunakannya:
const Demo = (props) => { .... return <JSONDisplayer>{someObj}<JSONDisplayer> }
sumber
Berikut ini demo
react_hooks_debug_print.html
react hooks yang didasarkan pada jawaban Chris. Contoh data json berasal dari 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/[email protected]/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>
Atau dengan cara berikut, tambahkan gaya ke dalam 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>
Dan ganti
DebugPrint
dengan yang berikut ini:const DebugPrint = () => { // /programming/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> ) }
sumber