使用 Visual Studio 时如何在浏览器登录 ASP.NET MVC 应用程序中查看实际的 React 错误

Question

我刚刚在我的应用程序中安装了 ReactJS.NET，并打算在单个页面上使用它。我习惯于制作 "whole thing" 是 React（以及 Typescript 和 Webpack）的应用程序。

但是，如果我简单地安装 ReactJS.NET 并导入教程代码，它就可以工作：

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

但是，假设我们现在出错并在 render 函数中创建另一个 div，所以我们应该得到一个错误，我们不能有相邻的元素。然后我只得到以下错误：

并且在 console.log 中，我收到以下对我没有帮助的错误：

Invoices:841 GET http://localhost:55075/Scripts/React/InvoiceBuilder/App.jsx net::ERR_ABORTED

而如果我使用 React 的标准 Visual Studio 模板，实际错误会显示得非常清楚。

这是因为我没有使用 Typescript 吗？或者在处理 React 时，是否有另一种方法可以在 Visual Studio 和 Chrome 浏览器中获得很好的错误处理？

Answer 1

作为我的评论，

visual studio only focus on backend or desktop. Even reshapher cannot handle like this. I suggest use vscode for editing jsx like this

如果您仍想使用 visual studio 而不是 vscode，您可以在此处 documentation 使用流程检查 lint js/jsx。使用cmd/powershell/terminal检查验证码。

首先全局安装流程，link

npm install -g flow

然后在项目的根目录下，运行 init flow by cmd/powershell:

flow init

最后，把你的 js 放在最上面（例如：tutorial.jsx）：

// @flow
class CommentBox extends React.Component {
    state = { data: this.props.initialData };
...

现在，您可以运行在 cmd/powershell 上通过

检查您的代码

flow status

然后看起来像这样：

坏消息，visual studio 还没有插件扩展 flow，目前只有 vscode。

使用 Visual Studio 时如何在浏览器登录 ASP.NET MVC 应用程序中查看实际的 React 错误

How to see actual React error in browser log in ASP.NET MVC application when using Visual Studio

asp.net

asp.net-mvc

visual-studio

reactjs

reactjs.net