Question

我遵循this指南，在尝试添加Hello World组件（Here）时陷入了困境。

一切都在编译，我没有收到任何错误，但看不到该组件。

以下是代码：

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.8.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <script src="@Url.Content("~/js/Tutorial.jsx")"></script>
</body>
</html>

这是Tutorial.jsx文件：

class CommentBox extends React.Component {
    render() {
        return (
            <div className="commentBox">Hello, world! I am a CommentBox.</div>
        );
    }
}

ReactDOM.render(<CommentBox />, document.getElementById('content'));

由于我是ReactJS.NET的新手，所以我希望这些信息足够。如果不是，请告诉我，我会提供更多信息。

编辑01：

我在控制台中收到一条错误消息：

The script from “https://localhost:44309/js/tutorial.jsx” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.`
Loading failed for the <script> with source “https://localhost:44309/js/tutorial.jsx”.

编辑02：似乎行<script src="@Url.Content("/js/tutorial.jsx")"></script>引起了问题。我将其更改为<script src="/js/tutorial.js"></script>，同时还将文件名更改为tutorial.js，现在它可以工作了。

谢谢！

Answer 1

似乎在线

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

是引起问题的原因。我将其更改为

<script src="/js/tutorial.js"></script>

同时将文件名更改为tutorial.js，现在它可以工作了。

ReactJS.NET-组件未添加到DOM

1 个答案: