Integrar en React
Consulta primero la instalación y el uso básico. Este ejemplo usa React para montar Univer Bases en un contenedor con una altura explícita.
Pasos de integración
- Inicializa Univer en
useEffect. - Libera Univer en
useEffect cleanup.
Código de ejemplo
Cada montaje usa su propio contenedor hijo. La destrucción se ejecuta en una microtarea tras la limpieza de React para evitar desmontar una raíz React anidada durante un commit.
TSX
import { useEffect, useRef } from 'react'import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIesES from '@univerjs-pro/bases-ui/locale/es-ES'import BasesesES from '@univerjs-pro/bases/locale/es-ES'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/bases-ui/lib/index.css'export 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 = new Univer({ locale: LocaleType.ES_ES, locales: { [LocaleType.ES_ES]: mergeLocales( DesignesES, UIesES, BasesesES, BasesUIesES, ), }, }) univer.registerPlugin(UniverLicensePlugin, { license: 'your license.txt', }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container }) univer.registerPlugin(UniverProFormulaEnginePlugin) univer.registerPlugin(UniverBasesPlugin) univer.registerPlugin(UniverBasesUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_BASE, {}) return () => { queueMicrotask(() => { univer.dispose() container.remove() }) } }, []) return <div ref={containerRef} style={{ height: 600 }} />}¿Cómo es esta guía?