我正在 .Net MVC 应用程序中的 View 中使用一些 ReactJS 组件。

目前，我有一个包含所有组件的文件，位于:/scripts/react-app/MyApp.jsx

我想将其拆分为多个文件，但是当我将组件移动到另一个文件中时，我收到运行时异常:

Uncaught ReferenceError: SomeComponent is not defined 

如何告诉 MyApp.jsx 引用另一个 .jsx 文件？

编辑:

我已尝试按照建议进行捆绑，但仍然遇到相同的错误。这是我所做的:

将以下内容添加到BundleConfig.cs:

 bundles.Add(new JsxBundle("~/bundles/main").Include( 
         "~/React/FileOne.jsx", 
         "~/React/FileTwo.jsx", 
         "~/React/FileThree.jsx")); 

在我的 _Layout.cshtml 中，我添加了:@Scripts.Render("~/bundles/main")

我尝试在 FileOne.jsx 中使用 FileThree.jsx 中定义的组件，但仍然收到 组件未定义 错误.

第二次编辑:

我更改为在 View 中使用 Html 助手，它开始为我工作:

@{ 
    ViewBag.Title = "Testing"; 
} 
 
<div id="someContent"> 
    @Html.React("FileOneComponent", new 
        { 
            prop1 = "a", 
            prop2 = "b", 
        }) 
</div> 
 
<script src="https://unpkg.com/react@0.13.3/dist/react.js"></script> 
@Scripts.Render("~/bundles/main") 
@Html.ReactInitJavaScript() 

请您参考如下方法:

要要求组件，首先将其导出(在其自己的文件中)，例如:

export default MyComponent; 

在您想要使用它的文件中，您需要它，如下所示:

import MyComponent from './mycomponent'; 

请务必正确指定路径，在我的示例中，它假定相同的文件夹。

如果您遇到任何捆绑问题，我衷心推荐 create-react-app

这将为您设置一个工作开发环境，包括测试。