Интеграция с Next.js
Сначала прочитайте установку и базовую настройку. В этом примере Next.js App Router монтирует Univer Sheets в контейнер с явно заданной высотой.
Динамически загрузите редактор из Client Component с ssr: false1. Директива use client сама по себе не отключает предварительный рендеринг. Next.js.
Шаги интеграции
- Инициализируйте Univer в хуке
useEffect. - Уничтожьте экземпляр Univer в функции, возвращаемой хуком
useEffect.
Пример кода
Каждое монтирование использует отдельный дочерний контейнер. Освобождение выполняется в микрозадаче после очистки внешнего React, чтобы не размонтировать вложенный React root синхронно во время commit.
TSX
'use client'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { useEffect, useRef } from 'react'import '@univerjs/preset-sheets-core/lib/index.css'export default function UniverEditor() { const containerRef = useRef<HTMLDivElement>(null) useEffect(() => { const host = containerRef.current if (!host) return const container = document.createElement('div') container.style.height = '100%' host.append(container) const { univer, univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, ), }, presets: [ UniverSheetsCorePreset({ container, }), ], }) univerAPI.createWorkbook({}) return () => { queueMicrotask(() => { univer.dispose() container.remove() }) } }, []) return ( <div ref={containerRef} style={{ height: 600 }} /> )}TSX
'use client'import dynamic from 'next/dynamic'const UniverEditor = dynamic(() => import('./univer-editor'), { ssr: false })export default function Page() { return <UniverEditor />}Footnotes
-
Серверный рендеринг (SSR) выполняет код отрисовки до загрузки страницы браузером, без
windowи DOM. Client Component также может предварительно отрисовываться, поэтому SSR редактора отключается отдельно. ↩
Насколько полезно это руководство?