ReactJS：JSX 改造后的 ascii 艺术问题

Question

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

输出：

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

我是不是做错了什么？任何帮助表示赞赏...

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

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

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

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

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

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

Answer 1

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

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

Answer 2

尝试在行与行之间添加 \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/

Answer 3

如果您无法使用不可分割的标签和 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/

This functionality is mainly provided for cooperation with DOM string manipulation libraries

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. https://facebook.github.io/react/tips/dangerously-set-inner-html.html

仅当您相信 ASCII 的来源不会注入 <script> 标签或其他恶意 HTML.

时才使用此解决方案

Answer 4

所以我最终在 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 一起工作。但我不确定它为什么有效。

UPDATE：它的工作原理是因为模板文字。他们的建议是无论如何都使用 babel，因为 JSXTransformer 已被弃用。

ReactJS：JSX 改造后的 ascii 艺术问题

ReactJS: ascii art issue after JSX transformation

javascript

ascii-art

reactjs

react-jsx