如何格式化输出文本以在反应中显示为代码

Question

这可能是我的一个新手问题，但有人可以告诉我如何让 React 将输入文本显示为代码吗？

我正在编写一个文档，我想在其中添加一个 JSON 格式。但是，而不是这样：

{
   "policies":{
      "ExtensionSettings":{
         "*":{
            "blocked_install_message":"Custom error message.",
            "install_sources":[
               "about:addons",
               "https://addons.mozilla.org/"
            ],
            "installation_mode":"allowed",
            "allowed_types":[
               "extension"
            ]
         },
         "{d634138d-c276-4fc8-924b-40a0ea21d284}":{
            "installation_mode":"force_installed",
            "install_url":"https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1"
         }
      }
   }

结果是这样的：

{ “策略”：{ “ExtensionSettings”：{ “*”：{ "blocked_install_message": "自定义错误信息。", "install_sources": ["about:addons","https://addons.mozilla.org/"],"installation_mode": “允许”，“允许类型”：[“扩展”]}， “{d634138d-c276-4fc8-924b-40a0ea21d284}”：{“安装模式”： “force_installed”、“install_url”： “https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1” } } }

我正在使用 React Semantic UI 并将文本包装在 <Container> 组件中。

Answer 1

在语义容器中很难将文本格式化为类似于 json 的格式，但您可以使用像 react-json-pretty 这样的反应包，或者您可以创建一个 JSON.stringify(json,undefined,2) 并将其传递到您添加到容器中的语义 TextArea 中，然后与 css 一起“玩”以使外观更好。
这里有两个解决方案的示例：

import React from "react";
import JSONPretty from "react-json-pretty";
import JSONPrettyMon from "react-json-pretty/dist/monikai";
import { Container, TextArea } from "semantic-ui-react";

const ContainerExampleContainer = () => {
  return (
    <>
      <Container>
        <h2>WITH STYLE</h2>
        <JSONPretty id="json-pretty" data={json} theme={JSONPrettyMon} />
        <h2>WITHOUT STYLE</h2>
        <JSONPretty id="json-pretty" data={json} />
      </Container>
      <Container>
        <h2>In a TextArea </h2>
        <TextArea
          style={{
            border: "none",
            cursor: "text",
            width: "100%"
          }}
          value={JSON.stringify(json, undefined, 2)}
          placeholder="json here"
          rows={25}
          disabled
        />
      </Container>
    </>
  );
};
const json = {
  policies: {
    ExtensionSettings: {
      "*": {
        blocked_install_message: "Custom error message.",
        install_sources: ["about:addons", "https://addons.mozilla.org/"],
        installation_mode: "allowed",
        allowed_types: ["extension"]
      },
      "{d634138d-c276-4fc8-924b-40a0ea21d284}": {
        installation_mode: "force_installed",
        install_url:
          "https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1"
      }
    }
  }
};

export default ContainerExampleContainer;

***更新***

除了将 textArea 传递给您的 Container 之外，您还可以在 Container 道具中添加 `as="textarea"`，如下所示：

 <Container
        as="textarea"
        style={{
          border: "none",
          cursor: "text",
          width: "100%"
        }}
        rows={25}
        value={JSON.stringify(json, undefined, 2)}
        disabled
      ></Container>