Как увидеть фактическую ошибку React в журнале браузера в приложении ASP.NET MVC при использовании Visual Studio

Я только что установил ReactJS.NET в свое приложение и планирую использовать его на одной странице. Я привык делать приложения, в которых «все» — это 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? Или есть другой способ получить хорошую обработку ошибок в Visual Studio и браузере Chrome при работе с React?


reactjs visual-studio asp.net asp.net-mvc reactjs.net
person Lars Holdgaard    schedule 01.04.2018    source источник
comment
Я думаю, что Visual Studio фокусируется только на бэкэнде или рабочем столе. Даже решафер с таким не справится. Я предлагаю использовать vscode для редактирования jsx, как это   -  person hendrathings    schedule 04.04.2018
comment
@hendrathings Это не так. Если вы запускаете приложение Visual Studio с React в качестве шаблона по умолчанию, вы получаете полную отладку и правильные сообщения об ошибках :-) Таким образом, этот шаблон каким-то образом позволяет это сделать.   -  person Lars Holdgaard    schedule 04.04.2018
comment
о да. Я понимаю. Я создал из netcore dotnet new react, intellij работает отлично. это особый случай для tsx, я думаю   -  person hendrathings    schedule 04.04.2018
comment
Я оставляю щедрость открытой еще на несколько дней в надежде получить более подробный ответ. Пожалуйста, отметьте это как ответ @hendrathings, и если ничего лучшего не появится, я присужу его вам до того, как закончится награда.   -  person Lars Holdgaard    schedule 07.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Как мой комментарий,

Visual Studio фокусируется только на бэкэнде или рабочем столе. Даже решафер с таким не справится. Я предлагаю использовать vscode для редактирования jsx, как это

Если вы все еще хотите использовать Visual Studio вместо vscode, вы можете проверить lint js/jsx с помощью потока, здесь документация. Используйте cmd/powershell/terminal для проверки кода проверки.

Первая глобальная процедура установки, ссылка

npm install -g flow

затем в корне вашего проекта запустите поток инициализации с помощью cmd/powershell:

flow init

наконец, поместите сверху свой js (например, tutorial.jsx):

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

Теперь вы можете запустить cmd/powershell, чтобы проверить свой код,

flow status

тогда выглядит так:

потоковое сообщение на терминале

Плохая новость: пока нет расширения плагина flow для Visual Studio, пока только vscode.

person hendrathings    schedule 07.04.2018