通过反应设置的 Html 内容显示在控制台中但不显示在 DOM 中答案

【问题标题】：Html Content set by react showing in console but not in DOM通过反应设置的 Html 内容显示在控制台中但不显示在 DOM 中
【发布时间】：2022-12-11 01:47:31
【问题描述】：

我通过在我的简单 HTML、CSS 和 JS 编辑器中的 index.html 文件中添加 React CDN 来使用 React 根据此文档 React，它在我的代码编辑器预览中运行良好： Code Editor's Preview

但是在主网页上，它没有显示 root.render 设置的反应输出。 My Webpage View

我希望我的 root.render 准确运行两次并显示我的数据，因为它在预览中显示。即使数据显示在控制台中，但不会像这样显示在页面上： WebPage with console

“like_button_container86551”是反应应用程序将在其中呈现的 div 的 ID，您可以访问我在这里使用的完整代码 React website file

【问题讨论】：

【解决方案1】：

我不明白真正的原因，但我用一个技巧解决了它，因为数据显示在控制台中，这意味着 DOM 没有显示更新的数据，所以我只是为我的内容 div 分配一个键

<span onClick={handleClickOpen} key={contentKey}>
...
</span>

在 useEffect 函数中渲染组件后，我将键值增加 1，这意味着我刷新了 DOM 元素，现在显示了内容：

useEffect(() => {
   setContentKey(1 + contentKey);
}, []);

【讨论】：