React中如何从Test2组件调用Test组件内的testFunc函数？

针对你提出的场景，以下是几种可行的实现方式：

1. 将函数提取到独立工具模块（无组件依赖时首选） #

如果testFunc不需要依赖Test组件的内部状态、props或DOM元素，直接把它抽成独立的工具函数是最简单的方案：

创建utils.js：

export const testFunc = () => {
  console.log("it is working");
};

在Test和Test2中分别导入使用：
Test.js

import { testFunc } from './utils';

export default function Test(){
  // 可直接调用testFunc
  return(
    <div>Hi</div>
  )
}

Test2.js

import { testFunc } from './utils';

export default function Test2(){
  return(
    <button onClick={testFunc}>Click</button>
  )
}

2. 通过父组件传递回调（组件有层级关系时常用） #

如果Test和Test2共享同一个父组件，可以把函数逻辑放在父组件中，或让Test将函数传递给父组件，再由父组件转发给Test2：

Parent.js

import Test from './Test';
import Test2 from './Test2';
import { useCallback } from 'react';

export default function Parent() {
  const testFunc = useCallback(() => {
    console.log("it is working");
  }, []);

  return (
    <div>
      <Test />
      <Test2 onButtonClick={testFunc} />
    </div>
  );
}

修改Test2.js：

export default function Test2({ onButtonClick }){
  return(
    <button onClick={onButtonClick}>Click</button>
  )
}

若testFunc必须依赖Test组件的内部状态，可让Test通过props把函数传递给父组件：
Test.js

import { useEffect } from 'react';

export default function Test({ onGetTestFunc }){
  const testFunc = () => {
    console.log("it is working");
  };

  useEffect(() => {
    onGetTestFunc(testFunc);
  }, [onGetTestFunc]);

  return(
    <div>Hi</div>
  )
}

对应修改Parent.js：

import Test from './Test';
import Test2 from './Test2';
import { useState, useCallback } from 'react';

export default function Parent() {
  const [testFunc, setTestFunc] = useState(null);

  const handleGetTestFunc = useCallback((func) => {
    setTestFunc(func);
  }, []);

  return (
    <div>
      <Test onGetTestFunc={handleGetTestFunc} />
      <Test2 onButtonClick={testFunc} />
    </div>
  );
}

3. 使用Ref + useImperativeHandle（需要调用子组件内部函数时） #

如果Test是Test2的父组件，或者Test2能获取到Test的Ref，可让Test通过useImperativeHandle暴露指定函数给外部：

修改Test.js（用forwardRef包裹）：

import { forwardRef, useImperativeHandle } from 'react';

const Test = forwardRef((props, ref) => {
  const testFunc = () => {
    console.log("it is working");
  };

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

  return(
    <div>Hi</div>
  )
});

export default Test;

修改Test2.js（假设Test是Test2的父组件）：

import Test from './Test';
import { useRef } from 'react';

export default function Test2(){
  const testRef = useRef(null);

  const handleClick = () => {
    testRef.current?.testFunc();
  };

  return(
    <div>
      <Test ref={testRef} />
      <button onClick={handleClick}>Click</button>
    </div>
  )
}

4. 使用React Context（组件层级较深时） #

如果Test和Test2在组件树中相距较远，不想层层传递props，可用Context提供函数：

创建TestFuncContext.js：

import { createContext, useContext, useState, useCallback } from 'react';

const TestFuncContext = createContext(null);

export function TestFuncProvider({ children }) {
  const testFunc = useCallback(() => {
    console.log("it is working");
  }, []);

  return (
    <TestFuncContext.Provider value={testFunc}>
      {children}
    </TestFuncContext.Provider>
  );
}

export function useTestFunc() {
  const func = useContext(TestFuncContext);
  if (!func) {
    throw new Error('useTestFunc must be used within a TestFuncProvider');
  }
  return func;
}

在根组件或父组件中包裹Provider：

import { TestFuncProvider } from './TestFuncContext';
import Test from './Test';
import Test2 from './Test2';

export default function App() {
  return (
    <TestFuncProvider>
      <Test />
      <Test2 />
    </TestFuncProvider>
  );
}

在Test2中使用：

import { useTestFunc } from './TestFuncContext';

export default function Test2(){
  const testFunc = useTestFunc();
  
  return(
    <button onClick={testFunc}>Click</button>
  )
}

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