在 jsx 组件中渲染 ascii 图像

Question

您好，我正在尝试在 React jsx 组件中呈现以下 ascii 图像，但出现解析错误：意外标记。我想知道我是否必须转义某些字符？

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

Answer 1

这里有三处错误： 1. style 必须是一个对象。 2. 您将需要使用模板文字字符串来保留换行符。 3. 您需要 escape/replace 反引号。

输入这个应该有效：

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

在 jsx 组件中渲染 ascii 图像

Rendering ascii image in jsx component

ascii

reactjs