React中如何在其他组件调用另一个组件定义的函数

首先纠正你代码里的语法错误：

• 组件导出语法错误：export default const A = () => {} 是无效写法，应改为 const A = () => {}; export default A 或直接 export default function A() {}
• 组件B中直接调用未定义的getItemX()会触发报错

以下是几种可行的实现方式：

方案一：抽离公共函数到独立模块 #

把无组件状态依赖的公共逻辑单独放到工具模块，这是最简洁的处理方式。

创建utils.js文件：

export const GetItemX = () => {
  alert("Devine calling");
};

export const GetItemY = () => {
  alert("Another function in this component");
};

修改组件A：

import { GetItemX, GetItemY } from './utils';

export default function A() {
  return <button onClick={GetItemX}>调用GetItemX</button>;
}

修改组件B：

import { GetItemX } from './utils';

export default function B() {
  const callGetItemX = () => GetItemX();
  
  return <button onClick={callGetItemX}>调用A的GetItemX</button>;
}

方案二：通过Props传递（A是B的父组件场景） #

如果组件A是组件B的直接父组件，可以把GetItemX作为props传递给B。

修改组件A：

import B from './B';

export default function A() {
  const GetItemX = () => {
    alert("Devine calling");
  };

  const GetItemY = () => {
    alert("Another function in this component");
  };

  return <B getItemX={GetItemX} />;
}

修改组件B：

export default function B({ getItemX }) {
  const callGetItemX = () => getItemX();
  
  return <button onClick={callGetItemX}>调用A的GetItemX</button>;
}

方案三：使用Context API（跨层级或无直接嵌套场景） #

如果组件A和B没有直接嵌套关系且层级较深，可借助React的Context API共享函数。

创建FunctionContext.js：

import { createContext, useContext } from 'react';

const FunctionContext = createContext();

export function FunctionProvider({ children, getItemX }) {
  return (
    <FunctionContext.Provider value={{ getItemX }}>
      {children}
    </FunctionContext.Provider>
  );
}

export function useFunctions() {
  return useContext(FunctionContext);
}

修改组件A（作为Context提供者）：

import { FunctionProvider } from './FunctionContext';
import B from './B';

export default function A() {
  const GetItemX = () => {
    alert("Devine calling");
  };

  const GetItemY = () => {
    alert("Another function in this component");
  };

  return (
    <FunctionProvider getItemX={GetItemX}>
      <B />
    </FunctionProvider>
  );
}

修改组件B：

import { useFunctions } from './FunctionContext';

export default function B() {
  const { getItemX } = useFunctions();
  
  const callGetItemX = () => getItemX();
  
  return <button onClick={callGetItemX}>调用A的GetItemX</button>;
}

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