用React漂亮地打印JSON

React.js

GreenNear

2020-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"。

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

第1653篇《用React漂亮地打印JSON》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
乐猪猪 2020.03.16 
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 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android