将 React 组件移动到 ReactJS.Net 中的另一个文件而不用 "unexpected identifier"

Question

我习惯了 "normal" React 设置，但现在我需要将 ASP.NET MVC 管理系统中的一个页面制作成一个简单的 React 应用程序。

我已经为 MVC 4/5 安装了 https://reactjs.net/，并遵循了有关如何设置的教程。

我的问题是：如何引用其他文件中的组件？

我做了什么：

我使用一个名为 App.jsx 的应用程序进行了超级简单的设置。如果我不引用任何页面，我会从上面的教程中获取输出。

但是，如果我 - 在同一个文件夹中 - 创建一个新文件，InvoiceBuilder.jsx，然后我创建以下内容（或任何代码，这似乎从未达到）：

var CommentForm = React.createClass({
    render: function () {
        return (
            <div className="commentForm">
                Hello, world! I am a CommentForm.
      </div>
        );
    }
});

我在我的 App.jsx 文件中引用了这个（我尝试了 import 语句的许多变体）：

import CommentForm from './InvoiceBuilder';

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList />
                <CommentForm />
            </div>
        );
    }
});

var Comment = React.createClass({
    render: function () {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>
        );
    }
});

var CommentList = React.createClass({
    render: function () {
        return (
            <div className="commentList">
                <Comment author="Daniel Lo Nigro">Hello ReactJS.NET World!</Comment>
                <Comment author="Pete Hunt">This is one comment</Comment>
                <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
        );
    }
});



ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

我已经得到错误：

Uncaught SyntaxError: Unexpected identifier

基于以以下开头的生成文件，并在导入行失败：

// @hash v3-E82E48A85D4E9467B3D81F106834DC4725BD0DDC
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 3.3.0 (build 8c1c474) with Babel 6.7.7
// Generated at: 01-04-2018 17:20:43
///////////////////////////////////////////////////////////////////////////////
//import React from 'react';
import CommentForm from './InvoiceBuilder';

var CommentBox = React.createClass({

编辑：

我尝试将 JSX 添加到这样的包中：

   bundles.Add(new BabelBundle("~/bundles/main").Include(
                "~/Scripts/React/InvoiceBuilder/InvoiceBuilder.jsx",
                "~/Scripts/React/InvoiceBuilder/App.jsx"
            ));

然后我在编译包时遇到这个错误：

+       InnerException  {"Error: unknown: Unexpected token (15:15)\n  13 |     document.getElementById('content')\n  14 | );;\n> 15 | export default var CommentForm = React.createClass({\n     |                ^\n  16 |     render: function () {\n  17 |         return (\n  18 |             <div className=\"commentForm\">\n   at n (React.Core.Resources.babel.generated.min.js:1:416)"}   System.Exception {JavaScriptEngineSwitcher.Core.JsRuntimeException}
        Message "Error: unknown: Unexpected token (15:15)\n  13 |     document.getElementById('content')\n  14 | );;\n> 15 | export default var CommentForm = React.createClass({\n     |                ^\n  16 |     render: function () {\n  17 |         return (\n  18 |             <div className=\"commentForm\">\n   at n (React.Core.Resources.babel.generated.min.js:1:416)" string

Answer 1

您需要向组件添加导出。

尝试

export default const CommentForm = React.createClass({
render: function () {
    return (
        <div className="commentForm">
            Hello, world! I am a CommentForm.
  </div>
    );
}

});

Answer 2

尝试 bundling 所有 jsx 文件并在 asp.net 网页中呈现捆绑的 js。

// BundleConfig.cs

bundles.Add(new BabelBundle("~/bundles/main").Include(
    "~/Scripts/React/InvoiceBuilder/InvoiceBuilder.jsx",
    "~/Scripts/React/InvoiceBuilder/App.jsx"      
));

// 示例页面 - 而不是 <script src="@Url.Content("~/Scripts/App.jsx")"></script>

@Scripts.Render("~/bundles/main")

更新:

捆绑工作正常，只需删除导入行和导出语句。

由于 Reactjs.Net 本身不支持 ES6 模块，如果你想使用模块而不仅仅是单独的文件和 Asp.Net MVC 捆绑，你应该使用模块捆绑器，例如 Webpack.

将 React 组件移动到 ReactJS.Net 中的另一个文件而不用 "unexpected identifier"

Move React component to a different file in ReactJS.Net without "unexpected identifier"

asp.net

asp.net-mvc

reactjs

reactjs.net