将 React 组件移动到 ReactJS.Net 中的其他文件，无需"unexpected identifier"

Question

我已经习惯了"正常" react设置，但是现在我需要将我的一个页面在我的ASP.NET MVC Admin System中制作到一个简单的React App中。

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

我的问题是：如何参考其他文件中的组件？

我做了什么：

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

但是，如果i-在同一文件夹中 - 制作一个新文件InvoiceBuilder.jsx，然后我进行以下(或任何代码，似乎都无法达到(：

(：

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

我在我的 App.jsx文件中引用了此信息(我尝试了导入语句的许多变体(：

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

尝试捆绑所有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")

Update ：

它可以与捆绑在一起工作，只是删除导入线和导出语句。

由于reactjs.net不支持ES6模块，如果要使用模块，而不仅仅是单独的文件和ASP.NET MVC捆绑，则应使用模块Bundler，例如WebPack。

Answer 2

您需要向组件添加导出。

尝试

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

}(;