在 ASP NET CORE 3.1 中 ReactJS.NET 如何在多个 .JSX 文件中引用组件

Question

开始的权利：我已经看过所有的帖子，并且在最近几天尝试了所有的排列，但这似乎对我不起作用。

我的项目是ASP.NET Core 3.1。我遵循了本教程：https://reactjs.net/tutorials/aspnetcore.html，其中所有反应反应组件都在一个文件中定义。我希望每个组件都在它自己的文件中。当我尝试将多个 .jsx 文件与 'export default' 和 'import from' 一起使用时，我的 .jsx 根本不执行。 == 如果所有组件都在同一个文件中，则一切正常。但是一旦我添加 import A from './test.jsx' 代码就会失败。它只是没有被执行。没有错误，异常...

这是我的项目树：

这是我在 Index.html 中的脚本引用：

<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0      /umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="~/Scripts/dist/Home/react/bundle.js"></script>

<script src="@Url.Content("~/js/test.jsx")"></script>
<script src="@Url.Content("~/js/MainPage.jsx")"></script>

这是在我添加 import 子句之前有效的 MainPage.jsx 文件：

import Test from './test.jsx';

class MainPage extends React.Component {

render() {
    return (
        <div className="main">
            <h2>Main page stuff:</h2>
            <StatusBar />
            <Test />
        </div>
    );
}
} 

class StatusBar extends React.Component {

render() {
    return (
        <div className="status">
            <h4>Status Bar</h4>
        </div>
    );
}

}

最后是 test.jsx:

export default class Test extends React.Component {
render() {
    return (
        <div className="test">
            <h4>Test Bar</h4>
        </div>
    );
}
}

也许我需要另一个 nuget？:

Aldo 我对 .NET env 相当流利，我对 javascript 和反应完全陌生，所以请详细解释。在 .NET 中，我们使用命名空间或引用命名空间来调用它。

Answer 1

根本不要使用 import 或 require。

相反，只需在根 html 文件中将您的 React 组件文件作为脚本引用（呈现反应的地方（<div id="root"></div>），在你的情况下 index.html。

所以在 index.html 中，只需添加：

<script src="@Url.Content("~/js/test.jsx")"></script>

那就是它。

在 ASP NET CORE 3.1 中 ReactJS.NET 如何在多个 .JSX 文件中引用组件

In ASP NET CORE 3.1 with ReactJS.NET how to reference components in multiple .JSX files

import

export

reactjs.net