javascript - 如何在组件中将 ".json"文件显示为文本,以便可以复制和粘贴?

标签 javascript reactjs

我的应用程序为此目的制作了另一个软件,并且有一个动态 json 文件,需要提供给用户进行复制和粘贴。

我有 json 文件和代码,用户需要能够准确地复制该 json 文件。

当我尝试将大型 json 文件包含在 JSX 中时,语法会变得疯狂并引发错误。

我需要在 JSX 中包含什么,以便它可以完全按照写入的 json 数据显示我的 json 数据。

或者,我如何设置 var myFile = myFile.json 然后在我的组件中显示该文件以便用户可以复制并粘贴它?

最佳答案

JSON.stringify() 有一个内置的 pretty-print 选项。通行证 4作为第三个参数(或您选择的缩进间距)以获得漂亮的输出。然后,将该输出放入 <pre>标签(或添加 white-space: pre CSS 样式以保留缩进的任何标签。)

例如

const exampleJson = { "name": "John", "age": 30, "car": null };

const prettyJson = JSON.stringify(exampleJson, null, 4); // indent 4 spaces

document.getElementById('json').textContent = prettyJson;

// EDIT: or just `return <pre>{prettyJson}</pre>` in jsx.
<body>
  <pre id='json'></pre>
</body>

<小时/>

复制的话,可以让用户高亮复制,或者看一下 document.execCommand("copy") 添加一个用户友好的按钮。

关于javascript - 如何在组件中将 ".json"文件显示为文本,以便可以复制和粘贴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51140921/

相关文章:

javascript - setInterval 的时钟不更新时间

javascript - Base45 - Uncaught ReferenceError : Buffer is not defined (React JS)

javascript - 将 HTML 环绕在文本周围

javascript - 根据if结果改变let值

reactjs - React Native Elements 全局样式

reactjs - Normalizr + Redux - 更新单个实体的属性

reactjs - MUI Prop 给出错误 : `requires between 4 and 5 type arguments`

javascript - 开 Jest ReferenceError : Cannot access '' before initialization

javascript - 如何正确销毁 Paper.js Scope

javascript - 单选按钮检查绑定(bind) html5,durandal