Intégrer dans React

Consultez d’abord l’installation et les premiers pas. Cet exemple utilise React pour monter Univer Boards dans un conteneur avec une hauteur explicite.

Étapes d’intégration

Initialisez Univer dans useEffect.
Libérez Univer dans useEffect cleanup.

Chaque montage utilise son propre conteneur enfant. La destruction est différée dans une microtâche après le nettoyage React parent, afin de ne pas démonter une racine React imbriquée pendant un commit.

TSX

import { useEffect, useRef } from 'react'import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIfrFR from '@univerjs-pro/boards-ui/locale/fr-FR'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIfrFR from '@univerjs-pro/ink-ui/locale/fr-FR'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignfrFR from '@univerjs/design/locale/fr-FR'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIfrFR from '@univerjs/docs-ui/locale/fr-FR'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIfrFR from '@univerjs/drawing-ui/locale/fr-FR'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIfrFR from '@univerjs/ui/locale/fr-FR'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs-pro/ink-ui/lib/index.css'import '@univerjs-pro/boards-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.FR_FR,      locales: {        [LocaleType.FR_FR]: mergeLocales(          DesignfrFR,          UIfrFR,          DocsUIfrFR,          DrawingUIfrFR,          InkUIfrFR,          BoardsUIfrFR,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'your license.txt',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    univer.registerPlugin(UniverDrawingPlugin)    univer.registerPlugin(UniverDrawingUIPlugin)    univer.registerPlugin(UniverInkUIPlugin)    univer.registerPlugin(UniverBoardsPlugin)    univer.registerPlugin(UniverBoardsUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})    return () => {      queueMicrotask(() => {        univer.dispose()        container.remove()      })    }  }, [])  return <div ref={containerRef} style={{ height: 600 }} />}

Que pensez-vous de ce guide ?