ReactJS.NET MVC教程不起作用？

小编典典

ReactJS.NET MVC教程不起作用？

reactjs

我正在尝试在Visual Studio中设置一个新项目，该项目将是用ReactJS编写的单页应用程序成为MVC
5。因此，我遵循了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>

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"到script标签之外，我还按照本教程的内容来做。我假设需要包含一些内容来处理将JSX转换为原始JS，但是本教程似乎并未提及这一点。

Chrome开发者工具控制台完全没有任何错误。

阅读 338

2020-07-22

共1个答案

小编典典

我想通了-本教程缺少两件事：

因此，应使用类型声明完成脚本的包含：

<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>

看来他们需要更新其教程。

更新：

评论者@DanielLoNigro添加了此有用的提示：

实际上，如果您使用的是ReactJS.NET，则无需使用客户端JSXTransformer。
只需确保在Web.config文件中配置了JSX处理程序（.jsx应该有一个处理程序）。

2020-07-22