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

Question

我刚在我的应用程序中安装了ReactJS.NET，并计划在一个页面上使用它。我习惯于将应用程序放在＆＃34;整个事物＆＃34;是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')
);

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

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

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

如果我使用标准的Visual Studio模板进行React，那么实际的错误会非常清楚地显示出来。

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

Answer 1

作为我的评论，

  视觉工作室只专注于后端或桌面。甚至reshapher也不能   像这样处理。我建议使用vscode来编辑像这样的jsx

如果你仍然想使用visual studio而不是vscode，你可以使用flow检查lint js / jsx，这里是documentation。使用cmd / powershell / terminal检查验证代码。

首先安装flow globaly，link

npm install -g flow

然后在项目的根目录下，通过cmd / powershell运行init flow：

flow init

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

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

现在，您可以运行cmd / powershell来检查您的代码

flow status

然后看起来像这样：

视觉工作室的坏消息，尚未插件扩展flow，目前只有vscode。