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

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"
         }
      }
   }

结果是这样的：

{ "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" } } }

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

Answer 1

在语义容器中很难将文本格式化为看起来像 json 但你可以使用像 react-json-pretty 这样的反应包，或者你可以制作一个 JSON.stringify(json,undefined,2) 并将其传递进去添加到容器中并使用 css 进行“播放”以使其看起来更好的语义 TextArea。
这是一个包含两种解决方案的示例：

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;

***更新***

您可以在 Container 属性中添加 as="textarea" ，而不是将 textArea 传递给您的容器，如下所示：

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