ReactJS：JSX转换后的ascii艺术问题
Ala*_*uza 6 javascript ascii-art reactjs react-jsx
我试图让我的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
所以我最终创造了一个问题，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 已被弃用。
| 归档时间： |
|
| 查看次数： |
759 次 |
| 最近记录： |