0
212
ViewsEditor.js renderizando/emitiendo dos editores en React
Estoy usando Editor.js en React (Next.js) y tengo el paquete original, no los envoltorios de terceros para reaccionar.
Por una razón que no sé, ¡está representando/mostrando/produciendo dos codex-editores en la página! Ambos funcionan correctamente e independientemente.
Captura de pantalla (agregué bordes para mostrar el área)
Códigos
índice.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;lo que probé
- Comentar
<SafeHydrate>y renderizar la página normalmente: sin suerte . (Agreguéwindowpara poder usar la API de Windows y también deshabilitar SSR) - Eliminando mi CSS personalizado (los bordes): sin suerte .
- Eliminando
id="editorjs"de<div>: no aparece nada .
Notas adicionales
La página localhost:3001/notes/editor solo es accesible si se visita desde el menú de la barra lateral (similar a SPA). Quiero decir, muestra 'la ventana no está definida' si se abre directamente.
¿Qué está causando el problema?
·
Juan Pablo Isaza
1 answers
Answer question0
El uso useEffect resuelve el problema, ya que solo se ejecuta después de la presentación de la página inicial:
export default function index(params) { useEffect(() => { const editor = new EditorJS({ holder: "editorjs", }); }, []); return ( <> <h1>New Note</h1> <div className={css["editor-area"]} id="editorjs" /> </> ); }
·
Juan Pablo Isaza
Report
Answer question