0

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

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

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

问题截图

代码

索引.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 以便我可以使用windowAPI 并禁用 SSR）
  • 删除我的自定义 CSS（边框）：不走运。
  • 从id="editorjs":什么都没有出现<div>。

补充说明

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

是什么导致了问题？

4

1 回答 1

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" />
      </>
   );
}
于 2021-10-06T11:32:23.873 回答