【问题标题】：Editor.js rendering/outputting two editors in ReactEditor.js 在 React 中渲染/输出两个编辑器
【发布时间】：2021-11-26 13:21:03
【问题描述】：

我在 React (Next.js) 中使用 Editor.js 并且拥有原始包，而不是用于 react 的 3rd 方包装器。

由于我不知道的原因，它正在页面上呈现/显示/输出两个codex-editores！它们都正常且独立地工作。

屏幕截图（我添加了边框以显示该区域）

代码

index.jsx

import EditorJS from "@editorjs/editorjs";
import css from "./removeme.module.scss" // just to see the area;

export default function index(params) {
   const editor = new EditorJS({
      holder: "editorjs",
   });

   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}

_app.js

function SafeHydrate({ children }) {
   return <div suppressHydrationWarning>{typeof window === "undefined" ? null : children}</div>;
}

function MyApp({ Component, pageProps }) {
   return (
      <SafeHydrate>
         <Body>
            <Sidebar items={SidebarLinks} />
            <Page>
               <Component {...pageProps} />
            </Page>
         </Body>
      </SafeHydrate>
   );
}

export default MyApp;

我尝试了什么

评论<SafeHydrate> 并正常呈现页面：不走运。（我添加了 SafeHydrate 以便我可以使用 window API 并禁用 SSR）
删除我的自定义 CSS（边框）：不走运。
从<div> 中删除id="editorjs"：没有显示。

附加说明

页面localhost:3001/notes/editor 只能在从侧边栏菜单（类似SPA）访问时访问。我的意思是，如果直接打开它会显示“未定义窗口”。

导致问题的原因是什么？

【问题讨论】：

几周前有同样的问题：stackoverflow.com/questions/67990522/…
奇怪在发布我的@PRSHL 之前我没有找到您的问题。另外，不只是 2 个，我又试了一次，发现它可以是 4 个或 5 个或更多编辑器！

标签： javascript reactjs next.js server-side-rendering editorjs

【解决方案1】：

使用useEffect 解决了这个问题，因为它只在初始页面渲染后运行：

export default function index(params) {
   useEffect(() => {
      const editor = new EditorJS({
         holder: "editorjs",
      });
   }, []);
   
   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}

【讨论】：

还可以查看这个答案stackoverflow.com/questions/62563285/… 以进一步配置和使用 editor.js + next.js。