更漂亮的网络使用

Question

我尝试使用 react 应用格式化输入文本。我在这里想要实现的是，这个组件从 props 获取文本输入，它通过所需的“traslator”函数，并在右侧编写翻译后的代码。我希望这个新文本 const newInput = string 通过更漂亮的格式进行格式化。 Prettier 正在网络上工作，所以应该没什么大不了的，但是当我尝试使用 prettier.format() 函数时，它就不起作用了。

我看不到任何不能在 React 中使用的东西，但它仍然无法工作，并说它无法解析导入，这可以在 react 组件的顶部看到。 那么我该如何实现这一点，或者任何其他关于格式化任何输入文本“更漂亮”的建议？

这是该函数的原始文档：

 <script type="text/javascript">
    var formatButton = document.querySelector("#format");
    var textInput = document.querySelector("#input");
    formatButton.addEventListener("click", function() {
      var value = textInput.value;
      textInput.value = prettier.format(value, {
        parser: "babylon",
        plugins: prettierPlugins
      });
    });
  </script>

这是我目前的代码：

import React from "react";

//prettier imports
import prettier from "https://unpkg.com/prettier@2.2.1/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.2.1/esm/parser-babel.mjs";
import parserHtml from "https://unpkg.com/prettier@2.2.1/esm/parser-html.mjs";

const Display = (props) => {
  const { input, isToggled } = props;

  // entity to HTML
  const tagsToReplace = {
    "&": "&",
    "&lt;": "<",
    "&gt;": ">",
    "&nbsp;": " ",
  };

  const newInput = input.toString().replace(/&lt;|&gt;/gi, function (matched) {
    return tagsToReplace[matched];
  });

  //HTML to entity
  const tagsToReplaceBack = {
    "<": "&lt;",
    ">": "&gt;",
  };
  const changeBackInput = input.toString().replace(/<|>/gi, function (matched) {
    return tagsToReplaceBack[matched];
  });

  const formattedInput = prettier.format(newInput, {
    parser: "babel",
    plugins: [parserBabel, parserHtml],
  });


  return <div>{formattedInput}</div>;
};

export default Display;

/* {isToggled ? <div>{changeBackInput}</div> : <div>{newInput}</div>} */

Answer 1

我认为您的捆绑程序（可能是 webpack？）不支持从 URL 导入模块。您需要从 npm 安装 Prettier 作为依赖项，并以与导入 React 相同的方式导入它。例如。请参阅此 Codesandbox：https://codesandbox.io/s/async-worker-2oul0?file=/src/App.js