我正在尝试在 Visual Studio 中设置一个新项目，该项目将成为 MVC 5，其中包含一个用 ReactJS 编写的单页应用程序。所以我关注了the guide on the ReactJS website .
我到达了运行项目的第一部分，由于 JSX(浏览器似乎想将其解释为普通 JavaScript，这非常合理)，我遇到了语法错误。所以我在脚本标签中添加了 type="text/jsx"。
总的来说，我的 HTML/JSX 看起来像这样:
Razor View 的 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>
Tutorial.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 View 的完整 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>
看起来他们需要更新他们的教程。
更新:
评论者@DanielLoNigro 添加了这个有用的提示:
实际上，如果您使用的是 ReactJS.NET，则不需要使用客户端 JSXTransformer。只需确保在您的 Web.config 文件中配置了 JSX 处理程序(.jsx 应该有一个处理程序)。
关于javascript - ReactJS.NET MVC 教程不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28205649/