在mvc-target容器中使用react不是dom元素

Question

我正试图在我的mvc应用程序中使用react，但遇到了一个问题，我不知道如何解决它。

我有文件DraftCommentsDisplay.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = <h1>Test</h1>;
const root = ReactDOM.createRoot(document.getElementById('my-comments'));
root.render(myElement);

这里没有什么真正有价值的东西，但我只是想在真正实现我需要这个文件来做之前让它发挥作用

然后通过webpack将其绑定到一个名为draftComments.bundle.js的文件中，以便浏览器可读。

然后我试图在DraftCommentsEditor.cshtml中引用这个文件，如下所示：

@{
Html.Assets().Scripts.Add("/Scripts/bundles/draftComments.bundle.js");
}

在这个文件中，我有一个div，名为mycomments，如下所示：

<section id="comments">
<div id="my-comments"></div>
</section>

并且这是在id为"的div内；草稿编辑器"；以备不时之需。

浏览器可以读取js文件，但是，我得到了错误：

未捕获错误：createRoot(…(：目标容器不是DOM元素。

它指的是我的评论。所以我不确定这里发生了什么？是否在文档完全加载之前调用了js文件？如果是，我该如何解决？

Answer 1

实际情况是，这个问题是因为在dom完全加载之前调用了js文件，所以更改了调用该文件的方式。我去掉了这条线：

@{
Html.Assets().Scripts.Add("/Scripts/bundles/draftComments.bundle.js");
}

然后在div下面我做了评论：

<script src="/Scripts/bundles/draftComments.bundle.js"></script>

这样做为我解决了问题，现在我不再得到错误