警告：道具'id'不匹配。将tinymce与下一个js一起使用

嗨，我用tinymce来表示这个医生的反应

它可以工作，但我从控制台收到了这个警告

我在使用“下一步”：“^8.0.1”和@tinymce/tinymce react”：“^3.0.1”

---

那么为什么会发生这种情况呢？任何人都可以帮助我吗？谢谢

因为您使用的是

Next.js

，当您初始化

render

方法或功能组件函数体中应该属于生命周期处理程序的内容时，通常会发生此问题

如果您没有特定的理由在服务器端渲染TinyMCE，那么您可以尝试仅在客户端执行此操作

尝试在

componentDidMount

或

useffect

钩子中移动一些初始化TinyMCE的代码（取决于您使用的是类组件还是带钩子的函数组件）

---

这既可以避免SSR与浏览器不匹配的问题，又可以减轻服务器上的负载。

当您使用

Next.js

时，此问题通常发生在初始化

render

方法或功能组件函数体中本应属于生命周期处理程序的内容时

如果您没有特定的理由在服务器端渲染TinyMCE，那么您可以尝试仅在客户端执行此操作

尝试在

componentDidMount

或

useffect

钩子中移动一些初始化TinyMCE的代码（取决于您使用的是类组件还是带钩子的函数组件）

---

这将避免SSR与浏览器不匹配的问题，并减轻服务器上的负载。

现在到2020年，可以在Next.js中使用动态导入。使用SSR:false选项

---

现在到2020年，可以在Next.js中使用动态导入，并使用ssr:false选项

---

使用带有@tinymce/tinymce react v3.8.1的nextjs v9.x.x，我仍然面临这个问题

简单的方法是向

编辑器

组件添加一个固定的

id

道具，如下所示：

<Editor id="YOUR_FIXED_ID" init={{...tiny_mce_options}} />

---

使用带有@tinymce/tinymce react v3.8.1的nextjs v9.x.x，我仍然面临这个问题

简单的方法是向

编辑器

组件添加一个固定的

id

道具，如下所示：

<Editor id="YOUR_FIXED_ID" init={{...tiny_mce_options}} />

看起来您的问题与服务器端渲染返回的HTML与客户端期望的不同有关。您是否使用了一些SSR框架，如Gatsby或Next.js？是的，我使用的是Next js。请参阅下面发布的完整答案。让我知道这是怎么回事。看起来您的问题与服务器端渲染返回的HTML不同有关比客户期望的要多。你是在使用一些SSR框架，比如Gatsby还是Next.js？是的，我在使用Next js。了解我在下面发布的完整答案。让我知道这是怎么回事。你也可以在他们的官方GitHub讨论页面上问这个问题：你也可以在他们的官方GitHub讨论页面上问这个问题：