Question

我的应用为此目的制作了另一个软件，并且有一个动态的json文件，需要将其呈现给用户以进行复制和粘贴。

我有json文件和代码，用户需要能够完全照原样复制该json文件。

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

我需要在JSX中包含哪些内容，以便它可以在写入JSON数据时完全显示JSON数据。

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

Answer 1

JSON.stringify()具有内置的漂亮打印选项。传递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")添加一个用户友好的按钮。

Answer 2

您可以在组件的render方法中执行以下操作：

var prettifyJson = JSON.stringify(myFile, null, 4);

<pre>{ prettifyJson }</pre>

如何在组件中将“ .json”文件显示为文本，以便可以复制和粘贴？

2 个答案: