在单独的.JSX文件中引用组件

Question

我正在为.Net MVC应用程序中的视图使用一些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")

我正在尝试使用in FileThree.jsx中定义FileOne.jsx但仍然component is not defined出现错误的组件.

第二次编辑:

我改为在视图中使用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()

Answer 1

要需要一个组件，首先将其导出（在其自己的文件中），例如：

export default MyComponent;

在您想要使用它的文件中，您需要它如下：

import MyComponent from './mycomponent';

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

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

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