React组件函数导入问题：从Component1导入exampleFunction失败

exampleFunction 是定义在 Component1 组件内部的局部函数，作用域仅限 Component1 函数内部，并没有作为模块的导出成员对外暴露。你当前只默认导出了 Component1 组件本身，所以其他模块无法通过命名导入的方式获取这个内部函数。

有两种常见可行的方案：

方案一：将函数单独导出（推荐） #

把 exampleFunction 从 Component1 内部移出来，作为模块的独立导出成员，这样其他组件就能直接导入使用：

修改 Component1 的代码：

export function exampleFunction(){
    // function code here
}

const Component1 = () => {
    // 组件内部依然可以调用 exampleFunction
    exampleFunction();
}

export default Component1;

Component2 保持原导入方式即可：

import { exampleFunction } from './component1';

const Component2 = () => {
   return(
      <div>{exampleFunction()}</div>
   ); 
}

export default Component2;

方案二：通过组件引用暴露函数（仅适用于函数依赖组件内部状态的场景） #

如果 exampleFunction 必须依赖 Component1 的内部状态或上下文，无法单独提取，可以通过组件的 ref 来获取这个函数（需要配合 forwardRef 和 useImperativeHandle 钩子）：

修改 Component1：

import { useImperativeHandle, forwardRef } from 'react';

const Component1 = forwardRef((props, ref) => {
    function exampleFunction(){
        // function code here
    }

    useImperativeHandle(ref, () => ({
        exampleFunction
    }));

    return <div>Component1 内容</div>;
});

export default Component1;

Component2 中的使用方式：

import { useRef, useEffect } from 'react';
import Component1 from './component1';

const Component2 = () => {
   const component1Ref = useRef(null);

   useEffect(() => {
       if(component1Ref.current){
           component1Ref.current.exampleFunction();
       }
   }, []);

   return(
      <div>
          <Component1 ref={component1Ref} />
      </div>
   ); 
}

export default Component2;

注意：这种方案仅在函数必须依赖组件内部状态时使用，优先推荐方案一，让函数保持独立可复用性。

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