Editor.js rendering/outputting React 中的两个编辑器

Question

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

不知道为什么，页面上是rendering/showing/outputting两个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）访问时才能访问。我是说直接打开显示'window is not defined'

导致问题的原因是什么？

Answer 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" />
      </>
   );
}

Editor.js rendering/outputting React 中的两个编辑器

Editor.js rendering/outputting two editors in React

javascript

reactjs

server-side-rendering

next.js

editorjs

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

代码

index.jsx

_app.js

我试过的

补充说明