ReactJS：JSX转换后的ascii艺术问题
[英]ReactJS: ascii art issue after JSX transformation
问题描述
我试图让我的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
4 个解决方案
解决方案1
2 2015-08-24 19:54:59
如果您陷入了不可分割的标签和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时，才使用此解决方案。
解决方案2
2 已采纳 2015-08-24 22:53:20
因此，我最终在Github中创建了一个问题 ，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已被弃用。
解决方案3
1 2015-08-24 19:15:57
尝试先在行之间添加\\n字符：
var App = React.createClass({
render: function() {
var ascii = [
"+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
].join('\n');
return (
<pre>
<code>
{ascii}
</code>
</pre>
);
}
});
解决方案4
0 2015-08-24 19:12:04
尝试手动将换行符添加到每行的末尾，例如：
+--------+ +-------+ +-------+<br>
| | + ditaa + | |<br>
| Text | +-------+ |diagram|<br>
|Document| |!magic!| | |<br>
| | | | | |<br>
+---+----+ +-------+ +-------+
ReactJS：使用JSX进行数据转换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.