ReactJS.NET - 组件未添加到 DOM答案

【问题标题】：ReactJS.NET - Component is not added to DOMReactJS.NET - 组件未添加到 DOM
【发布时间】：2020-01-04 07:09:42
【问题描述】：

我正在关注 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，现在它可以工作了。

谢谢！

【问题讨论】：

所有脚本都加载了吗？在浏览器中按 F12 获取开发工具并检查网络选项卡。也许还要检查控制台，看看那里是否显示错误。
我现在检查了控制台，我看到了这两个错误：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”.
你确定你安装了ReactJS.net？
是的。当我试图编译我的代码时，我得到一个按摩框，上面写着：Adding the certificate to the Trusted Root Certificate store failed with the following error: The access control list (ACL) structure is invalid。这会导致问题吗？
我设法用wosi的答案修复了上面的按摩：stackoverflow.com/questions/47413183/…

标签： asp.net reactjs reactjs.net

【解决方案1】：

好像是线

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

导致问题。我把它改成

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

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

【讨论】：