React로 예쁜 인쇄 JSON

92

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".

해당 문자를 올바르게 해석하려면 어떻게해야합니까? {

javascript  json  reactjs  flux 
— Brandon
소스
4
시도해 보셨습니까 JSON.stringify(json, null, "\t")?
— brroshan 2015-06-10
this.getStateFromFlux().json이미 문자열을 반환하는 바보 같은 오류가 있음이 밝혀졌습니다 . 대신 JS 객체를 유지하도록 수정했으며 이제 완벽하게 작동합니다.
— Brandon
1
— Aprillion

답변:

190

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

예

Stateless 기능 구성 요소, React .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>));
— WiredPrairie
소스
2
감사합니다! 선택적 JSON.stringify-parameter에 대해 몰랐습니다. 자바 스크립트는 끝내 ^^입니다
— 마르셀 Ennix
React는 이제 더 이상 사용되지 않습니다. 대신 ReactDOM을 사용하십시오
— Brane
이것은 완벽합니다-가장 간단한 솔루션이 항상 최고입니다! 구문 강조 및 테마 피자를 위해 highlight.js 를 추가하는 것이 좋습니다 .
— KeepingItClassy
이 아름답다
— JChao
<pre> 태그 솔루션은 완벽하게 작동하며 올바른 방법입니다!
— Vikram K
20

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'; fontSize : '12px'; }

.header {backgroundColor : '# 193549'; 패딩 : '5px 10px'; fontFamily : '모노 스페이스'; 색상 : '# ffc600'; }

.pre {디스플레이 : '블록'; 패딩 : '10px 30px'; 여백 : '0'; 오버플로 : '스크롤'; }

— 크리스
소스
이것은 확실히 멋진 +1입니다! 컴포넌트 자체를 구축하기 전에 데이터를 디버깅하고 테스트하기 위해 이와 같은 작업을 거의하지 않습니다. 이것은 정말 굉장합니다!
— Ryan Hamblin 2016 년
1
: 구성 요소로 변환하는 toddmotto.com/react-create-class-versus-component
— whitneyland
11

' react-json-view '는 솔루션 렌더링 json 문자열을 제공합니다.

import ReactJson from 'react-json-view';
<ReactJson src={my_important_json} theme="monokai" />
— 아본 지앙
소스
5 
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>
}
— 벤 잉어
소스
0

다음은 react_hooks_debug_print.htmlChris의 답변을 기반으로 한 반응 후크 의 데모 입니다. 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>
  )
}
— Caot
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.