react （useContext）孙组件发送事件爷组件的兄弟组件也可以使用

1.创建一个全局的上下文components中创建一个context/AccountContextProvider.tsx文件，用于管理事件状态

import React, {createContext, FC, ReactNode, useState} from "react";

export interface accountContextType {
    mnemonic: string | null,
    unLockStatus: boolean,
    setUnLockStatus:any,
    setMnemonic: React.Dispatch<React.SetStateAction<string | null>>,
    globalEvent: number,
    sendGlobalEvent:any,

}

export const accountContext = createContext<accountContextType>({
    mnemonic: null,
    unLockStatus: true,
    globalEvent: 1,
    setUnLockStatus:() => {

    },
    sendGlobalEvent:() => {

    },
    setMnemonic: () => {
    }
});

const AccountContextProvider: FC<{ children?: ReactNode | undefined }> = (props) => {
    const [mnemonic, setMnemonic] = useState<string | null>(null);
    const [globalEvent, setGlobalEvent] = useState(1);  
    const [unLockStatus, setUnLockStatus] = useState(true)
    const sendGlobalEvent  = (event:any) => {
        setGlobalEvent(event)
    }
    return (
        <accountContext.Provider
            value={{
                mnemonic,
                unLockStatus,
                setUnLockStatus,
                setMnemonic,
                globalEvent,
                sendGlobalEvent
            }}
        >
            {props.children}
        </accountContext.Provider>
    );
};

export default AccountContextProvider;

2.孙组件中点击发送事件

import { accountContext } from "@/components/context/AccountContextProvider"

const GrandChildComponent = () => {
  const { sendGlobalEvent } = useContext(accountContext);

  const handleClick = () => {
    const event = 'Some global event occurred'; // 发送的全局事件
    sendGlobalEvent(event); //传入Some global event occurred
  };

  return <button onClick={handleClick}>Send Global Event</button>;
};

3.在爷组件的兄弟组件中订阅事件（在需要使用事件的组件中）

import { accountContext } from "@/components/context/AccountContextProvider"

const SiblingComponent = () => {
  const { globalEvent } = useContext(accountContext);

  return <div>Global Event: {globalEvent}</div>;
};

4.包裹全部组件

import React from 'react';
import AccountContextProvider from "@/components/context/AccountContextProvider"
import GrandChildComponent from './GrandChildComponent';
import SiblingComponent from './SiblingComponent';

const App = () => {
  return (
    <AccountContextProvider>
      <div>
        <GrandChildComponent />
        <SiblingComponent />
      </div>
    </AccountContextProvider>
  );
};

export default App;