MDB*_*rry 2 javascript asp.net asp.net-mvc ecmascript-6 reactjs
我正在尝试在 ASP.NET MVC 5 项目的 .jsx 文件中使用 import 关键字。我希望能够将其他 React 组件导入到另一个 React 组件中，但是，当使用 import 关键字时，我收到以下错误：
未捕获的语法错误：无法在模块外部使用 import 语句
下面是我的代码：
索引.cshtml：
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<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="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>
教程.jsx：
import Comment from '../Scripts/Comment.jsx';
class Tutorial extends React.Component {
render() {
return (
<div className="commentBox">
<h1>Homepage</h1>
<Comment />
</div>
);
}
}
ReactDOM.render(<Comment />, document.getElementById('content'));
评论.jsx：
class Comment extends React.Component {
render() {
return (
<p>I am a comment!</p>
);
}
}
export default Comment;
如果我没有导入，或者如果我直接在Tutorial.jsx 中添加Comment 类，它可以正常运行，但这不是我想要的。我希望能够将所有组件放在单独的 .jsx 文件中，并能够将某些组件导入到不同的组件中。有想法吗？
编辑：修复了导出默认注释，但错误仍然出现
<script>当元素包含import语句但<script>元素本身未声明为 ECMAScript（或 ES）模块时，会出现错误“无法在模块外部使用 import 语句” 。
该import语句要求将您的脚本文件Tutorial.jsx 声明为模块。将type具有值的属性添加到标记module中<script>。
请参阅页面顶部的第一段https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
import 语句不能在嵌入式脚本中使用，除非此类脚本具有 type="module"。
在您的 HTML 页面中，更改：
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
到
<script type="module" src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>