React中利用useImperativeHandle在父组件调用子组件方法的相关问题

一、能否通过useImperativeHandle+ref在App中控制Panel的展开/折叠？ #

可以，但你的现有代码存在几个关键问题需要修正：

1. 函数组件默认不接收ref属性，必须用React.forwardRef包裹Panel组件，才能接收父组件传递的ref。
2. 你在Panel里定义的expandRef是多余的，直接调用内部的onMaximize函数即可。
3. App组件中没有给Panel传递ref属性，导致ref.current始终为undefined。

修正后的代码： #

App组件修改点：

给Panel组件添加ref={ref}属性：

<Panel
  key={cardId}
  cardId={cardId}
  cardBody={cardBody}
  onClose={() =>
    setCard({
      cardId: "",
      cardBody: null
    })
  }
  ref={ref} {/* 新增这一行 */}
/>

Panel组件修改点：

用React.forwardRef包裹组件，移除无用的expandRef，调整useImperativeHandle的实现：

import React, { useImperativeHandle, useState, forwardRef } from "react"; // 引入forwardRef
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSquareMinus,
  faRectangleXmark
} from "@fortawesome/free-solid-svg-icons";

// 用forwardRef包裹，接收props和ref两个参数
export default forwardRef(function Panel(props, ref) {
  const [isMinimized, setIsMinimized] = useState(false);
  const { cardId, cardBody, onClose } = props; // 不再从props里取ref

  // 直接返回控制方法，调用内部的onMaximize
  useImperativeHandle(ref, () => {
    return {
      expandBtn: () => onMaximize()
    };
  });

  const onMaximize = () => {
    setIsMinimized(!isMinimized);
  };

  return (
    <div className={isMinimized ? "card-min" : "card"}>
      <div className="card-actions">
        <span onClick={onMaximize}>{cardId}</span>
        {!isMinimized && (
          <FontAwesomeIcon
            icon={faSquareMinus}
            onClick={() => setIsMinimized(true)}
          />
        )}
        <FontAwesomeIcon icon={faRectangleXmark} onClick={onClose} />
      </div>
      <div className="card-body">{cardBody}</div>
    </div>
  );
});

修改完成后，点击App中的「Open from out」按钮，就能通过ref调用Panel内部的expandBtn方法，实现展开/折叠的控制。

二、能否在Panel组件内部执行传入的onClose方法？ #

完全可以，这是React中父子组件通信的常规方式，你的现有代码已经正确实现了这一点：点击Panel右上角的关闭图标时，会调用传入的onClose回调，从而在App组件中清空card状态，移除Panel。

如果需要在其他场景（比如通过Imperative方法触发关闭），也可以直接在useImperativeHandle中添加关闭方法，示例如下：

useImperativeHandle(ref, () => {
  return {
    expandBtn: () => onMaximize(),
    closeBtn: () => onClose() // 新增关闭方法
  };
});

之后在App中就可以通过ref?.current?.closeBtn()直接触发Panel的关闭。

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