用React漂亮地打印JSON

GreenNear2020-03-16

我正在使用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"。

如何使这些字符正确解释？{

const getJsonIndented = (obj) => JSON.stringify(newObj, null, 4).replace(/["{[,\}\]]/g, "") const JSONDisplayer = ({children}) => ( <div> <pre>{getJsonIndented(children)}</pre> </div> )