প্রতিক্রিয়া সহ সুন্দর মুদ্রণ জেএসওএন ON

Question

আমি রিঅ্যাকটিজেএস ব্যবহার করছি এবং আমার অ্যাপ্লিকেশনের অংশটির জন্য প্রিন্টেড জেএসওএন প্রয়োজন।

আমি কিছু জেএসএন { "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>
  );
},

এটি দেখতে দেখতে মোট জাসনকে রেন্ডার করে "{ \"foo\" : 2, \"bar\": 2}\n"।

কীভাবে আমি এই চরিত্রগুলি সঠিকভাবে ব্যাখ্যা করতে পারি? {

Comments

আপনি চেষ্টা করেছেন JSON.stringify(json, null, "\t")?

— ব্রোশন

দেখা যাচ্ছে যে আমার মধ্যে একটি মূর্খ ত্রুটি this.getStateFromFlux().jsonছিল যার মাধ্যমে ইতিমধ্যে একটি স্ট্রিং ফিরে আসছিল। পরিবর্তে একটি জেএস বস্তু ধরে রাখতে আমি এটি পরিবর্তন করেছি এবং এটি এখন নির্দোষভাবে কাজ করে।

— ব্র্যান্ডন

এছাড়াও github.com/alexkuz/react-json-tree দেখুন

— এপ্রিলিয়ন

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

এর জন্য ধন্যবাদ! Alচ্ছিক JSON.stringify-parameter সম্পর্কে জানতেন না। জাভাস্ক্রিপ্ট দুর্দান্ত ^^

— মার্সেল এনিক্স

প্রতিক্রিয়া এখন হ্রাস করা হয়েছে, পরিবর্তে ReactDOM ব্যবহার করুন

— ব্রেন

এটি নিখুঁত - সহজ সমাধান সর্বদা সেরা! আমি যুক্ত করার প্রস্তাব দিই highlight.js কিছু সিনট্যাক্স হাইলাইটিং এবং pizzazz theming জন্য।

— কিপিংআইটক্লাসি

এটি সুন্দর

— জেচাও

<pre> ট্যাগ সমাধানটি পুরোপুরি কাজ করে এবং এটি সঠিক উপায়!

— বিক্রম কে

Answer 2

কেবল ওয়্যার্ডপ্রাইয়ের উত্তরটি সামান্য বাড়ানোর জন্য, একটি মিনি উপাদান যা খোলা এবং বন্ধ করা যায়।

যেমন ব্যবহার করা যেতে পারে:

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

হালনাগাদ

আরও আধুনিক পদ্ধতির (এখন যে ক্রিয়েক্লাস চলে যাওয়ার পথে)

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 {ব্যাকগ্রাউন্ড কালার: '# 1f4662'; রঙ: '# fff'; হরফ আকার: '12px'; }

। শিরোলেখ {পটভূমি রঙ: '# 193549'; প্যাডিং: '5px 10px'; fontFamily: 'মনোস্পেস'; রঙ: '# ffc600'; }

.pre {প্রদর্শন: 'ব্লক'; প্যাডিং: '10px 30px'; মার্জিন: '0'; উপচে পড়া: 'স্ক্রোল'; }

Comments

এটি নিশ্চিতভাবেই দুর্দান্ত +1! আমি উপাদানটি নিজেই তৈরি করার আগে ডেটা ডিবাগিং এবং পরীক্ষার জন্য এই জাতীয় ছোট জিনিস তৈরি করি। এই সত্যিই দুর্দান্ত!

— রায়ান হ্যাম্বলিন

উপাদানটিতে রূপান্তর করতে: toddmotto.com/react-create-class-versus-comp घटक

— হুইটনিল্যান্ড

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ক্রিসের উত্তরের উপর ভিত্তি করে প্রতিক্রিয়া হুকের এখানে একটি ডেমো রয়েছে। জসন ডেটা উদাহরণটি 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>
  )
}