Question

我试图在ASP.NET MVC 5项目的.jsx文件中使用import关键字。我希望能够将其他React组件导入另一个React组件，但是，当使用import关键字时，出现以下错误：

未捕获的SyntaxError：无法在模块外部使用import语句

下面是我的代码：

Index.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>

Tutorial.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'));

Comment.jsx：

class Comment extends React.Component {
    render() {
        return (
            <p>I am a comment!</p>
        );
    }
}

export default Comment;

如果我没有导入，或者直接在Tutorial.jsx内添加Comment类，则它运行良好，但这不是我想要的。我希望能够将所有组件都放在单独的.jsx文件中，并能够将某些组件导入到不同的组件中。想法？

编辑：修复了导出默认注释，但是仍然出现错误

Answer 1

您需要正确导出Comment组件。目前您正在做export default Test。

class Comment extends React.Component {
    render() {
        return (
            <p>I am a comment!</p>
        );
    }
}

export default Comment; //<------- see here

Answer 2

当<script>元素包含一个import语句但<script>元素本身未声明为ECMAScript（或ES）时，将导致错误“无法在模块外部使用import语句”模块。

import语句要求将脚本文件Tutorial.jsx声明为模块。将具有值type的{{1}}属性添加到module标记中。

请参见页面https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import顶部的第一段

除非嵌入式脚本具有type =“ module”，否则无法在嵌入式脚本中使用import语句。

在您的HTML页面中，更改：

<script>

到

<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>

ASP.NET-未捕获的SyntaxError：无法在模块外部使用import语句

2 个答案: