ReactJS：JSX 转换后的 ascii 艺术问题答案

【问题标题】：ReactJS: ascii art issue after JSX transformationReactJS：JSX 转换后的 ascii 艺术问题
【发布时间】：2015-11-18 07:34:32
【问题描述】：

我正在尝试让我的 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>

输出：

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

我在这里做错了吗？任何帮助表示赞赏...

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

更新 2：我收到的艺术作品是一个降价文件：

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

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

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

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

【问题讨论】：

您是如何接收 ASCII 艺术的？作为内置换行符的单个字符串？
我将它们作为降价文件接收并使用降价加载器将其转换为 HTML。生成的 HTML 是我用来提问的那个。
您能否将收到的特定字符串添加到您的问题中，这样我可以建议一个可行的转换。
完成，期待您的见解。
我不熟悉 jsx-loader 但我认为问题是 JSX 忽略了标签周围的换行符。但是变量内的换行符被保留。你能自己了解<pre><code> 中的 ASCII 码和硬代码吗？

标签： javascript reactjs react-jsx ascii-art

【解决方案1】：

所以我最终在 Github 中创建了一个 issue，Ben 建议切换到 Babel。

这是更新后的代码，可以正常工作。

<!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>

实际上添加 {` ... `} 适用于 jsx-transformer。但我不确定它为什么会起作用。

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

【讨论】：

【解决方案2】：

如果你被不可分割的标签和 ASCII 卡住了，你可以使用dangerouslySetInnerHTML:

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>;
  }
});

https://jsfiddle.net/yy31xqa3/5/

这个功能主要是为了配合DOM字符串操作库而提供的

innerHTML 使用不当可能会使您面临跨站脚本 (XSS) 攻击。 https://facebook.github.io/react/tips/dangerously-set-inner-html.html

仅当您相信 ASCII 的来源不会注入 <script> 标记或其他恶意 HTML 时才使用此解决方案。

【讨论】：

【解决方案3】：

尝试事先在行之间添加\n 字符：

var App = React.createClass({
  render: function() {
    var ascii = [
      "+--------+   +-------+    +-------+",
      "|        |   + ditaa +    |       |",
      "|  Text  |   +-------+    |diagram|",
      "|Document|   |!magic!|    |       |",
      "|        |   |       |    |       |",
      "+---+----+   +-------+    +-------+",
    ].join('\n');

    return (
      <pre>
        <code>
          {ascii}
        </code>
      </pre>
    );
  }
});

https://jsfiddle.net/yy31xqa3/

【讨论】：

好一个！但它仍然不存在。我无法编辑艺术品，因为它来自我的图书馆之外。我已经更新了问题以反映这一点。感谢您的帮助！
我推荐我的other answer。它更适合您的具体情况。

【解决方案4】：

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

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

【讨论】：

谢谢@Allen，但我不能这样做，因为我的图书馆是从我无法控制的外部接收艺术作品。另外，如果我手动添加<br /> 标签，渲染的 HTML 会充满 span 标签。
有没有机会在渲染之前对源艺术进行字符串替换？也许尝试将“\n”替换为“
\n”