☰

React で JSON をきれいに印刷する 質問する

tag-icon • tag-icon javascript json reactjs flux
React で JSON をきれいに印刷する 質問する

私は ReactJS を使用しており、アプリの一部にはきれいに印刷された JSON が必要です。

次のような JSON を取得し、それをブラウザ コンソールで{ "foo": 1, "bar": 2 }実行するときれいに印刷されますが、これをこの React スニペットで使用すると次のようになります。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"。

これらの文字を適切に解釈するにはどうすればよいでしょうか? {

ベストアンサー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'));

例

ステートレス機能コンポーネント、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>));

おすすめ記事