在 React 中集成 Univer

React 17、18、19

集成前须知

Univer 在 React 19+ 中会抛出警告：Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack。别担心，这不会影响 Univer 的使用，我们会在未来的版本中逐步修复这个问题。

集成步骤

在 useEffect 钩子中初始化 Univer
在 useEffect 钩子的返回函数中销毁 Univer

示例代码

import React, { useEffect, useRef } from 'react'
 
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
export function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const { univerAPI } = createUniver({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: merge(
          {},
          UniverPresetSheetsCoreZhCN,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: containerRef.current,
        }),
      ],
    });
    
    univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
    return () => {
      univerAPI.dispose();
    };
  }, [])
 
  return (
    <div ref={containerRef}></div>
  );
}

React 16.9+

集成前须知

虽然 Univer 的视图层是基于 React 18.3.1 开发的，但是我们也对 React 16.9+ 的项目提供了最低限度的兼容。需要注意的是，这不代表 Univer 会无限期地支持低版本 React。任何软件都需要不断更新，以适应新的技术和需求，因此我们仍旧建议你尽快升级到最新版本的 React。
若要在 React 16.9+ 中使用 Univer，你需要借助构建工具的 alias 功能来模拟 react-dom/client 的导出：

vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
+      "react-dom/client": path.resolve(__dirname, './src/client.ts'),
    }
  }
}

src/client.ts

import ReactDOM from 'react-dom'
 
export function createRoot(container: HTMLElement) {
  return {
    render: (element: JSX.Element) => {
      ReactDOM.render(element, container)
    }
  }
}

集成步骤

在 useEffect 钩子中初始化 Univer
在 useEffect 钩子的返回函数中销毁 Univer

示例代码

import React, { useEffect, useRef } from 'react'
 
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
export function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const { univerAPI } = createUniver({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: merge(
          {},
          UniverPresetSheetsCoreZhCN,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: containerRef.current,
        }),
      ],
    });
    
    univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
    return () => {
      univerAPI.dispose();
    };
  }, [])
 
  return (
    <div ref={containerRef}></div>
  );
}

在 Node.js 上运行 Univer Vue

这个页面对您有帮助吗？