.NET 框架项目中的 ReactJS - 不能在module外使用导入语句

IT技术 asp.net reactjs babeljs
2021-05-03 03:58:24

我尝试在 .net 框架 MVC 应用程序中使用 reactJS。

看法:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

<div id="root"></div>
@Scripts.Render("~/Scripts/ReactJS/test.jsx")

测试.jsx:

import React from 'react';

import ReactDOM from 'react-dom';

const App = () => <div>Hello world!</div>;
ReactDOM.render(<App />, document.getElementById("root"));

消息未显示,错误是:

test.jsx:2 Uncaught SyntaxError: 不能在module外使用 import 语句

我不明白为什么这不起作用。我已经包含了 react 库和 babel 库。

2个回答

您可以在 BudleConfig.js 中捆绑您的文件

 bundles.Add(new BabelBundle("~/bundles/test").Include(
           ("~/Scripts/lib/Component/test.jsx"),
           ));

然后在你的 CSHTML 中的 Script 中导入这个 Bundler

 @Scripts.Render("~/bundles/test");
 ReactDOM.render(
        React.createElement(test),
        document.getElementById('root')
    );

你很高兴可以在现有的 MVC 项目中轻松创建和导入 JSX。

在您的视图中,而不是使用 @Scripts.Render("~/Scripts/ReactJS/test.jsx")

您可以尝试像这样<script src="@Url.Content("~/Scripts/ReactJS/test.jsx")"></script>创建引用的 JavaScript 文件 (test.jsx)。