ReactJS.net 无法调试

Question

我使用 ReactJS.Net 和 ASP.NET 创建了一个小应用程序 5. 如果我使用 @Html.React 呈现组件服务器端并将其绑定到 MVC

@using System.Threading.Tasks
@using React.AspNet
@model Models.DashboardViewModel

@Html.React("MessageBoard", new
{
    recentPosts = Model.RecentPosts
})

messageBoard.jsx

"use strict";

var MessageBoard = React.createClass({
    render: function(){
        return (<table className="table forum table-striped">
                <thead> 
                    <tr>
                        <th className="cell-stat"></th>
                        <th>Topic</th>
                        <th className="cell-stat text-center hidden-xs hidden-sm">Replies</th>
                        <th className="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
                    </tr>
                </thead>
                    <tbody>
                        {this.props.recentPosts.map(function(boardPost){
                            return <BoardPostRow post={boardPost}/>;
                        }, this)}
                    </tbody>
                </table>)
        }
});

这一切都很好。问题是，当我访问源代码时，没有 .js 文件，所以我无法调试。对于一些简单的只读元素，这可能没问题。但是现在我想渲染一些包含状态的交互元素，用于创建一个新的Post到"message board"的表单。这是同一 *.cshtml 文件中的代码。

<div id="newPost"></div>

@section scripts
{
    <script src="@Url.Content("~/scripts/Components/Board/boardPostForm.jsx")"></script>
    <script src="@Url.Content("~/scripts/Components/Common/textInput.jsx")"></script>
    <script>React.render(BoardPostForm({}), document.getElementById("newPost"))</script>
    @Html.ReactInitJavaScript()
}

我在控制台中得到的错误是：

Uncaught SyntaxError: Unexpected token <
textInput.jsx:19 Uncaught SyntaxError: Unexpected token <
(index):69 Uncaught ReferenceError: BoardPostForm is not defined(anonymous function) @ (index):69
(index):70 [.NET] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MessageBoard. See http://fb.me/react-warning-keys for more information.
(index):71 [.NET] Warning: Unknown DOM property class. Did you mean className?
(index):71 Uncaught ReferenceError: MessageBoard is not defined

似乎在尝试读取 .jsx 时出错，因为当我单击错误时它会将我带到渲染函数。我在这里错过了什么？也许我需要将 jsx->js 转换作为构建过程的一部分（我正在使用 Gulp）而不是依赖 ReactJS.NET?

Answer 1

如果您在网络浏览器中点击 /scripts/Components/Board/boardPostForm.jsx 会怎样？它应该显示编译后的 JSX 并在文件顶部有一些 ReactJS.NET 信息。如果没有，请确保在 Web.config 中配置了 *.jsx 处理程序。它应该看起来像这样：

<add name="ReactJsx" verb="GET" path="*.jsx" type="React.Web.JsxHandlerFactory, React.Web" preCondition="integratedMode" />

What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?

如果你愿意，你可以使用Gulp，由你决定。我这里有一个示例，它使用 Webpack 进行捆绑，并使用 ReactJS.NET 进行服务器端渲染：https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack

ReactJS.net 无法调试

ReactJS.net unable to debug

reactjs

react-jsx

reactjs.net

asp.net-core