React.js中如何在父组件调用子函数式组件内部定义的函数？

你需要搭配使用React内置的forwardRef和useImperativeHandle两个API完成实现，具体步骤如下：

1. 改造子组件，暴露内部方法 #

用forwardRef包裹你的子组件，接收父组件传递的ref作为第二个参数，再通过useImperativeHandle把checkPercentage函数挂载到ref上即可：

import { useState, forwardRef, useImperativeHandle } from 'react';

// forwardRef包裹子组件，第二个参数为父组件传入的ref
const YourChildComponent = forwardRef((props, ref) => {
  // 你原本的state定义保留
  const [doneId, setDoneId] = useState('');
  const [doneCount, setDoneCount] = useState(0);
  const [percentDone, setPercentDone] = useState(0);
  // lists、tasks根据你的实际来源取值，示例中假设是父组件传入的props
  const { lists, tasks } = props;

  // 你原本的checkPercentage函数保留
  const checkPercentage = () => {
    let count = 0;
    for(let list of lists){
      if(list.title === "Done"){
        setDoneId(list.listId);
      }
    }
    for (let task of tasks) {
      if (task.listId === doneId) {
        count++;
        setDoneCount(count);
      }
      setPercentDone((doneCount / tasks.length) * 100);
    }
    console.log("done count")
    console.log(doneCount)
    console.log(percentDone)
    console.log(tasks)
  };

  // 核心：将需要暴露给父组件的方法挂载到ref上
  useImperativeHandle(ref, () => ({
    checkPercentage
    // 可继续添加其他需要暴露的方法，逗号分隔即可
  }));

  // 保留你子组件原本的渲染逻辑
  return <div>{/* 子组件原有内容 */}</div>
});

export default YourChildComponent;

2. 改造父组件，通过ref调用子组件方法 #

父组件中创建ref挂载到子组件上，即可通过ref访问子组件暴露的方法：

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

const ParentComponent = () => {
  // 创建关联子组件的ref
  const childCompRef = useRef(null);

  // 任意需要触发子组件方法的场景下调用即可，示例为点击按钮触发
  const triggerChildCheck = () => {
    // 加可选链避免子组件未挂载完成时调用报错
    childCompRef.current?.checkPercentage();
  };

  return (
    <div>
      <button onClick={triggerChildCheck}>触发子组件百分比计算</button>
      {/* 将ref传递给子组件 */}
      <YourChildComponent ref={childCompRef} lists={你的lists变量} tasks={你的tasks变量} />
    </div>
  );
};

export default ParentComponent;

注意事项 #

• 该方案仅适用于必须父组件主动触发子组件内部逻辑的场景，常规需求优先通过props传递状态驱动子组件更新，避免过度使用ref导致数据流不清晰。
• 如果子组件有条件渲染的逻辑，需要确保调用方法时子组件已完成挂载，避免ref为null的报错。

内容的提问来源于stack exchange，提问作者Mirna Abd El-Azeem