我正在尝试在 Visual Studio 中设置一个新项目，该项目将是 MVC 5，其中包含用 ReactJS 编写的单页应用程序。所以我跟着ReactJS 网站上的指南.
我到达了运行项目的第一部分，由于 JSX，我遇到了语法错误（浏览器似乎想将其解释为普通 JavaScript，这非常有意义）。所以我添加了type="text/jsx"到脚本标签。
总的来说，我的 HTML/JSX 看起来像这样：
Razor 视图的 HTML 输出
<!doctype html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
</body>
</html>
教程.jsx
var CommentBox = React.createClass({
render: function() {
return (
<div className="comment-box">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
我不明白——我做错了什么？除了添加之外，我已严格按照教程进行操作type="text/jsx"到脚本标签。我假设需要包含一些内容来处理将 JSX 转换为普通 JS，但教程似乎没有提到这一点。
我在 Chrome 开发者工具控制台中根本没有收到任何错误。
我发现了 - 该教程缺少两件事：
-
脚本包含应该通过类型声明来完成：
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
-
需要包含 JSX 变压器：
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
因此 Razor 视图的完整 HTML 输出应如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
</body>
</html>
看起来他们需要更新他们的教程。
Update:
评论者@DanielLoNigro 添加了这个有用的提示：
实际上，如果您使用 ReactJS.NET，则不需要使用客户端 JSXTransformer。只需确保在 Web.config 文件中配置 JSX 处理程序（应该有一个 .jsx 的处理程序）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
