Рендеринг изображения ascii в компоненте jsx

Question

Здравствуйте. Я пытаюсь отобразить следующее ascii-изображение в реактивном jsx-компоненте, но получаю сообщение об ошибке: Неожиданный токен. Интересно, мне нужно сбежать от некоторых персонажей?

<code><pre id="taag_output_text" style="float:left;" class="fig" contenteditable="true">   _     _   
  (c).-.(c)  
   / ._. \   
 __\( Y )/__ 
(_.-/'-'\-._)
   || T ||   
 _.' `-' '._ 
(.-./`-'\.-.)
 `-'     `-'

Answer 1

Есть три вещи, которые здесь не правы: 1. style должен быть объектом. 2. Вам нужно будет использовать литеральные строки шаблона для сохранения разрывов строк. 3. вам нужно будет избежать / заменить backticks.

Установка этого должно работать:

<code>      <pre
        id="taag_output_text"
        style={{ float: "left" }}
        class="fig"
        contenteditable="true"
      >
        {`
          _     _   
          (c).-.(c)  
           / ._. \   
         __\( Y )/__ 
        (_.-/'-'\-._)
           || T ||   
         _.' \`-' '._ 
        (.-./\`-'\.-.)
         \`-'    \`-'
          `}