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")

我尝试使用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

这为您设置了一个有效的开发环境，包括测试。

Answer 2

如果您正在利用ReactJS.NET的服务器端呈现 - 您是否检查过包含 SomeComponent 的文件是否包含在ReactConfig.cs文件中（在App_Start下）？ / p>

如果@ Html.React呈现的根组件使用SomeComponent，则其代码文件也必须包含在该服务器端包中。

修改我在问题中错过了第二编辑，其中说明你已经解决了问题。我认为以上可能对将来使用单独文件的服务器端渲染的人有用。

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

2 个答案: