在React中通过Context管理Ref并处理焦点事件的实践指南

import React, { useRef, useContext, useMemo } from 'react';

// 定义Context的类型
interface EditorContextProps {
    historyState: any; // 示例，具体类型根据实际需求定义
    ref: React.RefObject<HTMLDivElement>;
}

// 创建Context
const EditorContext = React.createContext<EditorContextProps | undefined>(undefined);

// 自定义Hook，方便消费Context
export function useEditorContext(): EditorContextProps {
    const context = useContext(EditorContext);
    if (context === undefined) {
        throw new Error('useEditorContext must be used within an EditorProvider');
    }
    return context;
}

// EditorProvider组件
export default function EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<HTMLDivElement>(null); // 创建ref
    const historyState = useMemo(() => ({ /* 初始状态 */ }), []); // 示例
    const context = { historyState, ref };

    return (
        <EditorContext.Provider value={context}>
            <div ref={ref}> {/* 将ref绑定到DOM元素 */}
                {children}
            </div>
        </EditorContext.Provider>
    );
}

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假设路径

function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred');
        // 在这里处理失焦逻辑
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 错误示范：blur事件不冒泡
            element.addEventListener('blur', blurHandler, false);
        }

        return () => {
            if (element) {
                element.removeEventListener('blur', blurHandler);
            }
        };
    }, [ref.current, blurHandler]); // 依赖项中包含ref.current

    return null; // 插件通常不渲染DOM
}

import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假设路径

function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const blurHandler = useCallback((event: FocusEvent) => {
        console.log('Blurred or focus moved out from a child element');
        // 在这里处理失焦逻辑
    }, []);

    useEffect(() => {
        const element = ref.current;
        if (element) {
            // 正确做法：使用focusout事件，它会冒泡
            element.addEventListener('focusout', blurHandler);
        } else {
            return; // 如果element不存在，则不进行操作
        }

        // 清理函数：在组件卸载或依赖项改变时移除事件监听器
        return () => {
            if (element) { // 再次检查element是否存在，以防万一
                element.removeEventListener('focusout', blurHandler);
            }
        };
    }, [ref.current, blurHandler]); // 依赖项中包含ref.current和blurHandler

    return null;
}