Estoy usando ReactJS y parte de mi aplicación requiere bastante impreso JSON.

Tengo algo de JSON como: { "foo": 1, "bar": 2 }, y si me quedo que a través de JSON.stringify(obj, null, 4) en el navegador de la consola, es bastante impresiones, pero cuando lo uso en esta reaccionar fragmento:

render: function() {
  var json = this.getStateFromFlux().json;
  return (
    <div>
      <JsonSubmitter onSubmit={this.onSubmit} />
      { JSON.stringify(json, null, 2) }
    </div>
  );
},

hace bruto JSON que se parece a "{ \"foo\" : 2, \"bar\": 2}\n".

¿Cómo puedo conseguir esos caracteres se interpretan correctamente? {

  • ¿Has probado JSON.stringify(json, null, "\t") ?
  • Resulta que yo tenía un tonto error por el cual this.getStateFromFlux().json se encontraba ya de regreso de una cadena. La he modificado para sostener un objeto JS en su lugar, y ahora funciona a la perfección.
  • véase también github.com/alexkuz/react-json-tree
InformationsquelleAutor Brandon | 2015-06-10

5 Comentarios

  1. 147

    Necesitará insertar BR etiqueta adecuada en la cadena resultante, o use por ejemplo un PRE etiqueta, de manera que el formato de la stringify se conserva:

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

    Ejemplo de trabajo.

    Actualización

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

    Bastante Impresión JSON con Reaccionar

    Apátridas componente Funcional, Reaccionar .14 o superior

    const PrettyPrintJson = ({data}) => {
        //(destructured) data could be a prop for example
        return (<div><pre>{ JSON.stringify(data, null, 2) }</pre></div>);
    }

    O, …

    const PrettyPrintJson = ({data}) => (<div><pre>{ 
        JSON.stringify(data, null, 2) }</pre></div>);

    Ejemplo de trabajo

    Memo /16.6+

    (Incluso es posible que desee utilizar un memo, un 16,6+)

    const PrettyPrintJson = React.memo(({data}) => (<div><pre>{
        JSON.stringify(data, null, 2) }</pre></div>));
    • Gracias por esto! No sabía acerca de la opcional JSON.stringify-parámetro. Javascript es impresionante ^^
    • Reaccionar ahora es obsoleta, uso ReactDOM lugar
    • Esto es perfecto – la solución más simple es siempre la mejor! Recomiendo añadir highlight.js para algunos resaltado de sintaxis y tematización de dinamismo.
    • esto es hermoso
  2. 19

    Sólo para extender en el WiredPrairie la respuesta un poco, un mini componente, que puede ser abierto y cerrado.

    Puede ser utilizado como:

    <Pretty data={this.state.data}/>

    Bastante Impresión JSON con Reaccionar

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

    Actualización

    Un enfoque más moderno (ahora que createClass está en el camino de salida)

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

    Y su estilo de archivo

    .de la raíz {
    backgroundColor: ‘#1f4662’;
    color: ‘#fff’;
    fontSize: ’12 px’;
    }

    .header {
    backgroundColor: ‘#193549’;
    relleno: ‘5px 10px’;
    fontFamily: ‘monospace’;
    color: ‘#ffc600’;
    }

    .pre {
    pantalla: ‘block’;
    relleno: ’10px 30px’;
    margen: ‘0’;
    desbordamiento: ‘scroll’;
    }

    • Esto es impresionante +1 seguro! Hago pequeñas cosas como esta para la depuración de datos de prueba y antes de la construcción de la componente de sí mismo. Esto es realmente impresionante!
    • Para convertir a componente: toddmotto.com/react-create-class-versus-component
  3. 0

    Aquí es una demostración react_hooks_debug_print.html en reaccionar ganchos que se basa en la respuesta de Chris. Los datos json ejemplo es el de https://json.org/example.html.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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>
    

    O de la siguiente manera, agrega el estilo en el encabezado:

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

    Y reemplazar DebugPrint con el siguiente:

    const DebugPrint = () => {
    //https://stackoverflow.com/questions/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>
    )
    }
  4. 0
    const getJsonIndented = (obj) => JSON.stringify(newObj, null, 4).replace(/["{[,\}\]]/g, "")
    const JSONDisplayer = ({children}) => (
    <div>
    <pre>{getJsonIndented(children)}</pre>
    </div>
    )

    Entonces fácilmente se puede utilizar:

    const Demo = (props) => {
    ....
    return <JSONDisplayer>{someObj}<JSONDisplayer>
    }

Dejar respuesta

Please enter your comment!
Please enter your name here