警告：道具 `id` 不匹配。在下一个 js 中使用 tinymce

Question

您好，我正在使用 tinymce 对此文档做出反应 TinyMCE Doc link

它有效，但我从控制台收到此警告

我使用 "next": "^8.0.1", and @tinymce/tinymce-react": "^3.0.1"

那为什么会这样呢？任何人都可以帮助我吗？谢谢

Answer 1

鉴于您正在使用 Next.js，此问题通常发生在您在 render 方法或功能组件函数体中初始化应属于生命周期处理程序的内容时。

如果您没有特殊原因要服务器渲染 TinyMCE，您可以尝试仅在客户端执行。

尝试在您的 componentDidMount 或 useEffect 挂钩中移动一些初始化 TinyMCE 的代码（取决于您使用的是 Class 组件还是带挂钩的功能组件）。

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

Answer 2

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

Official Doc

Answer 3

我在使用 nextjs v9.x.x 和 @tinymce/tinymce-react v3.8.1.

时仍然遇到这个问题

简单的方法是像这样向 Editor 组件添加一个固定的 id 属性：

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

Answer 4

它对我有用。这是编辑器的完整代码：

<Editor
    id='FIXED_ID'
    apiKey="my-api-key"
    onInit={(evt, editor) => editorRef.current = editor}
    initialValue="<p>This is the initial content of the editor.</p>"
    init={{
        height: 500,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }}
/>

警告：道具 `id` 不匹配。在下一个 js 中使用 tinymce

Warning: Prop `id` did not match. using tinymce with next js

tinymce

next.js