React非直接关联组件间如何跨层级调用组件函数？

当然可行，给你几个不用给顶层父组件加额外逻辑的实现思路：

方案1：利用Context封装回调 #

既然有公共的高层父组件，可以基于React Context做一个专门的回调管理容器，父组件只需要提供上下文，不用承担任何业务逻辑：

1. 创建Context管理文件：

// CallbackContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

type CallbackContextType = {
  registerCompACallback: (callback: () => void) => void;
  triggerCompACallback: () => void;
};

const CallbackContext = createContext<CallbackContextType | undefined>(undefined);

export const CallbackProvider = ({ children }: { children: ReactNode }) => {
  const [compACallback, setCompACallback] = useState<(() => void) | undefined>();

  const registerCompACallback = (callback: () => void) => {
    setCompACallback(callback);
  };

  const triggerCompACallback = () => {
    compACallback?.();
  };

  return (
    <CallbackContext.Provider value={{ registerCompACallback, triggerCompACallback }}>
      {children}
    </CallbackContext.Provider>
  );
};

export const useCallbackContext = () => {
  const context = useContext(CallbackContext);
  if (!context) {
    throw new Error('useCallbackContext must be used within a CallbackProvider');
  }
  return context;
};

2. 在公共高层父组件中包裹Provider：

// 公共父组件
import { CallbackProvider } from './CallbackContext';

export const ParentComponent = () => {
  return (
    <CallbackProvider>
      {/* 嵌套CompA和CompB所在的子树 */}
      <CompATree />
      <CompBTree />
    </CallbackProvider>
  );
};

3. 修改CompA注册回调：

// CompA.tsx
import { useCallbackContext } from './CallbackContext';
import { useEffect } from 'react';

export const CompA<CompAProps> = ({...}: CompAProps) => {
  const [stateArray, setStateArray] = useState<StatePropName[] | undefined>();
  const { registerCompACallback } = useCallbackContext();

  const handleSetArray = () => {
     dispatch(postDataArray(stateArray));
  };

  // 组件挂载时注册回调，卸载时清理
  useEffect(() => {
    registerCompACallback(handleSetArray);
    return () => registerCompACallback(() => {});
  }, [handleSetArray, registerCompACallback]);

  return (<>.....</>);
}

4. 修改CompB触发回调：

// CompB.tsx
import { useCallbackContext } from './CallbackContext';

export const CompB<CompBProps> = ({...}:CompBProps) => {
  const { triggerCompACallback } = useCallbackContext();

  const executeCompAFunc = () => {
     triggerCompACallback();
  };

  return (
     <>
        <button onClick={executeCompAFunc}>触发CompA的调度</button>
     </>);
}

方案2：基于Redux重构逻辑（适合全局状态场景） #

你之前尝试过用Redux存状态，其实可以把handleSetArray的逻辑直接封装到Redux的action中，CompB只需要触发这个action即可，无需依赖CompA的函数：

1. 调整Redux Action：

// redux/actions.ts
export const postDataArrayAction = (data: StatePropName[] | undefined) => {
  return async (dispatch: Dispatch) => {
    // 这里写入原handleSetArray中的调度逻辑，比如接口请求等
    dispatch(postDataArray(data));
  };
};

2. CompA仅维护本地状态（如果需要）：

// CompA.tsx
export const CompA<CompAProps> = ({...}: CompAProps) => {
  const [stateArray, setStateArray] = useState<StatePropName[] | undefined>();

  // 状态设置由其他函数处理
  return (<>.....</>);
}

3. CompB直接触发Redux Action：

// CompB.tsx
import { useDispatch, useSelector } from 'react-redux';
import { postDataArrayAction } from './redux/actions';

export const CompB<CompBProps> = ({...}:CompBProps) => {
  const dispatch = useDispatch();
  // 若需要CompA的stateArray，从Redux中获取（前提是CompA已将状态存入Redux）
  const stateArray = useSelector((state: RootState) => state.yourSlice.stateArray);

  const executeCompAFunc = () => {
     dispatch(postDataArrayAction(stateArray));
  };

  return (
     <>
        <button onClick={executeCompAFunc}>触发调度</button>
     </>);
}

内容的提问来源于stack exchange，提问作者subparmelon