Javascript ReactJS:JSX转换后的ascii艺术问题_Javascript_Reactjs_React Jsx_Ascii Art

Javascript ReactJS:JSX转换后的ascii艺术问题

javascript reactjs

Javascript ReactJS:JSX转换后的ascii艺术问题,javascript,reactjs,react-jsx,ascii-art,Javascript,Reactjs,React Jsx,Ascii Art,我正在尝试让我的React应用程序正确地呈现ascii艺术执行jsx transformer后，我的艺术放松了格式，并在浏览器中呈现出非常奇怪的效果我的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <script src="https://cdnjs.cloudflare.com/

我正在尝试让我的React应用程序正确地呈现ascii艺术

执行jsx transformer后，我的艺术放松了格式，并在浏览器中呈现出非常奇怪的效果

我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            </code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

          +--------+   +-------+    +-------+<br>
          |        |   + ditaa +    |       |<br>
          |  Text  |   +-------+    |diagram|<br>
          |Document|   |!magic!|    |       |<br>
          |        |   |       |    |       |<br>
          +---+----+   +-------+    +-------+

); } }); var元素=document.getElementById（'content'）； React.render（React.createElement（App），element）； 输出：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            </code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

          +--------+   +-------+    +-------+<br>
          |        |   + ditaa +    |       |<br>
          |  Text  |   +-------+    |diagram|<br>
          |Document|   |!magic!|    |       |<br>
          |        |   |       |    |       |<br>
          +---+----+   +-------+    +-------+

如果我删除react并将预代码块直接添加到html中，一切正常

我做错什么了吗？感谢您的帮助

更新1：我无法编辑ascii艺术

更新2：我收到艺术品作为降价文件：

<pre><code>+--------+   +-------+    +-------+
|        | --+ ditaa +    |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|        |   |       |    |       |
+---+----+   +-------+    +-------+
</code></pre>

在标记转换为HTML后，这是我拥有的字符串：

我仍然在使用JSX加载程序将HTML转换为JSX。流程是markdown->html->jsx

尝试手动在每行末尾添加换行符，例如：

var App = React.createClass({
  render: function() {

    // My representation of your input ASCII you get from elsewhere
    var inputASCII = [
      "<pre><code>+--------+   +-------+    +-------+",
      "|        |   + ditaa +    |       |",
      "|  Text  |   +-------+    |diagram|",
      "|Document|   |!magic!|    |       |",
      "|        |   |       |    |       |",
      "+---+----+   +-------+    +-------+",
      "</code></pre>",
    ].join('\n');

    // dangerouslySetInnerHTML expects an object like this:
    var wrappedASCII = {__html: inputASCII };

    return <span dangerouslySetInnerHTML={wrappedASCII}></span>;
  }
});

++----------++----------++------++++

||+ditaa+| |

|文本|+----+|图表|

|文件| |！魔法|

|| | | | |

+---+----+   +-------+    +-------+

尝试在行前添加

\n

字符：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/babel">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>{`
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            `}</code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

); } });

如果你被不可分割的标签和ASCII码所困扰，你可以使用

危险的HTML

：

", ].join（'\n'）； //危险的LySetinerHTML需要这样一个对象： var wrappedASCII={uuuu html:inputASCII}；返回；

    +--------+   +-------+    +-------+
    |        | --+ ditaa +    |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |        |   |       |    |       |
    +---+----+   +-------+    +-------+

} });

此功能主要用于与DOM字符串操作库协作

不正确使用innerHTML会使您面临跨站点脚本（XSS）攻击。

只有在您信任ASCII的源不会注入标签或其他恶意HTML的情况下，才使用此解决方案。

因此我最终在Github中创建了一个，Ben建议切换到Babel

下面是运行正常的更新代码

); } }); var元素=document.getElementById（'content'）； React.render（React.createElement（App），element）；实际上，添加{`…`}与jsx transformer一起工作。但我不确定为什么它会工作

更新：由于模板文本的缘故，它可以正常工作。他们的建议是无论如何都要使用babel，因为JSXTransformer已被弃用。

谢谢@Allen，但我不能这样做，因为我的库从我无法控制的外部接收艺术。此外，如果我手动添加

标记，则呈现的HTML充满了span标记。在渲染源艺术作品之前，是否有可能对其进行字符串替换？请尝试将“\n”替换为“
\n”“好的！但它仍然不在那里。我无法编辑该艺术作品，因为它来自我的图书馆之外。我更新了问题以反映这一点。谢谢你的帮助！我推荐我的朋友。它更适合您的具体情况。您如何接收ASCII艺术？作为内置新行的单个字符串，我将它们作为标记文件接收，并使用标记加载程序将其转换为HTML。生成的HTML是我在问题中使用的HTML。你能将收到的特定字符串添加到你的问题中吗？这样我可以建议一个有效的转换。完成，期待你的见解。我不熟悉jsx loader，但我认为问题是jsx忽略了标记周围的换行符。但变量中的换行符是保留的。你能自己在

中找到ASCII码和硬码吗？