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>

输出：

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

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

更新1 ：我无法编辑ascii art。

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

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

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

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

我仍在使用JSX-loader将HTML转换为JSX。流程是降价 - ＆gt; html - ＆gt; JSX

Answer 1

如果您遇到不可分割的标签和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，请仅使用此解决方案。

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

1 个答案: