सुंदर मुद्रण JSON प्रतिक्रिया के साथ

Question

मैं 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"।

मुझे उन पात्रों को कैसे ठीक से व्याख्या करने के लिए मिलता है? {

Comments

क्या आपने कोशिश की है JSON.stringify(json, null, "\t")?

— ब्रोशन

यह पता चला है कि मेरे पास एक मूर्खतापूर्ण त्रुटि थी जिससे this.getStateFromFlux().jsonपहले से ही एक स्ट्रिंग वापस आ रही थी। मैंने इसे बदले में JS ऑब्जेक्ट रखने के लिए संशोधित किया, और यह अब त्रुटिपूर्ण रूप से काम करता है।

— ब्रैंडन

यह भी देखें github.com/alexkuz/react-json-tree

— Aprillion

Answer 1

आपको 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'));

स्टेटलेस फ़ंक्शनल घटक, प्रतिक्रिया ।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>));

Comments

इसके लिए धन्यवाद! वैकल्पिक JSON.stringify-पैरामीटर के बारे में पता नहीं था। जावास्क्रिप्ट कमाल है ^ ^

— मार्सेल एननिक्स

रिएक्ट अब पदावनत हो गया है, इसके बजाय ReactDOM का उपयोग करें

— ब्रैन

यह एकदम सही है - सबसे सरल समाधान हमेशा सबसे अच्छा होता है! मैं कुछ सिंटैक्स हाइलाइटिंग और थीमिंग pizzazz के लिए highlight.js जोड़ने की सलाह देता हूं ।

— कीपिंग इटक्लासी

यह सुंदर है

— जेसीओए

<पूर्व> टैग समाधान पूरी तरह से काम करता है और यह सही तरीका है!

— विक्रम के

Answer 2

बस 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'; रंग: '# फाफ'; fontSize: '12px'; }

.याडर {बैकग्राउंडर: '# 193549'; गद्दी: '5px 10px'; fontFamily: 'मोनोस्पेस'; रंग: '# ffc600'; }

.pre {प्रदर्शन: 'ब्लॉक'; गद्दी: '10px 30px'; मार्जिन: '0'; अतिप्रवाह: 'स्क्रॉल'; }

Comments

यह सुनिश्चित करने के लिए बहुत बढ़िया +1 है! मैं डीबगिंग के लिए इस तरह की छोटी चीजें बनाता हूं और घटक के निर्माण से पहले डेटा का परीक्षण करता हूं। यह एक बहुत बढ़िया है!

— रयान हैम्ब्लिन

घटक में परिवर्तित करने के लिए: toddmotto.com/react-create-class-versus-component

— whitneyland

Answer 3

' रिएक्शन-जॉन्सन-व्यू ' समाधान प्रदान करता है जोसन स्ट्रिंग।

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

Answer 4

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>
}

Answer 5

यहाँ 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 = () => {
  // /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>
  )
}