Как оптимизировать фрагменты кода Dynami c в React? - PullRequest
Новая
       33

Как оптимизировать фрагменты кода Dynami c в React?

0 голосов
/ 08 апреля 2020

Я смотрел на префтификаторы кода, такие как google-code-prettify, beautify и др. c. К сожалению, я не смог заставить их работать в моем приложении React. В настоящее время я используюact-ace для отображения динамически заполненных фрагментов кода, но они только выделены цветом, а не отформатированы.

Существуют ли простые примеры того, как можно заставить это работать в приложении React? ? Не обязательно использовать редактор Ace - это было своего рода хаком, чтобы код выглядел довольно красиво.

1 Ответ

1 голос
/ 08 апреля 2020

Спасибо за этот вопрос, вы можете использовать красивее для форматирования кода. Вам может потребоваться настроить другой синтаксический анализатор в зависимости от языка или структуры, которую вы используете.

Вот примеры кодов и поле для форматирования JS кода. Ссылка: https://codesandbox.io/s/currying-architecture-tm785?file= / src / App. js

Код для основного файла: 

import React from "react";
import prettier from "prettier/standalone";
import babylon from "prettier/parser-babel";

import "./styles.css";

export default function App() {
  const [code, setCode] = React.useState(`
        const a = "abc";


                const b = 'a'


           console.log(a);       
  `);

  const formatCode = () => {
    const formattedCode = prettier.format(code, {
      parser: "babel",
      plugins: [babylon]
    });

    setCode(formattedCode);
  };

  return (
    <div className="App">
      <textarea
        style={{ height: "100px", width: "100%", display: "block" }}
        value={code}
      />
      <button onClick={formatCode}>Format Code with Prettier</button>
    </div>
  );
}

Надеюсь, это поможет!

...