如何为Tooltip组件的动态子元素按钮绑定关闭函数？

你遇到的核心问题是组件内部状态和方法的封装性与外部子元素访问需求之间的矛盾——Tooltip的hide()方法和visible状态都在组件内部，而作为content传入的弹窗按钮无法直接拿到这个方法。

最优雅且轻量的解决方案是将content props从静态元素改为函数，让Tooltip组件把内部的hide()方法传递给这个函数，这样你就能在弹窗内容里直接绑定这个方法了。

步骤1：修改Tooltip组件，支持函数类型的content #

首先调整Tooltip组件，判断传入的content是否为函数，如果是则传入hide方法并执行它：

import { FC, useState } from 'react';
import Tippy from '@tippyjs/react';

// 更新Props类型，允许content是函数
type TooltipProps = {
  content: React.ReactNode | ((props: { hide: () => void }) => React.ReactNode);
  helperText?: string;
  children: React.ReactNode;
} & React.ComponentProps<typeof Tippy>;

export const Tooltip: FC<TooltipProps> = ({ content, helperText, children, ...props }) => {
  const [visible, setVisible] = useState(false);
  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  // 处理content：如果是函数，传递hide方法并渲染结果
  const renderedContent = typeof content === 'function' 
    ? content({ hide }) 
    : content;

  return (
    <div>
      <Tippy 
        content={renderedContent} 
        visible={visible} 
        onClickOutside={hide} 
        interactive 
        {...props} 
      >
        <div onClick={visible ? hide : show}>
          {children}
        </div>
      </Tippy>
    </div>
  );
};

步骤2：调用Tooltip时，用函数形式传入content #

现在你可以在content函数里拿到hide方法，直接绑定到Cancel按钮的点击事件上：

<Tooltip 
  content={({ hide }) => (
    <div className="popover-buttons">
      {/* 直接绑定Tooltip内部的hide方法 */}
      <button onClick={hide}> Cancel </button>
      <button> Delete </button>
    </div>
  )}
>
  {/* 这里是触发弹窗的元素，比如一个删除图标或按钮 */}
  <button>打开删除确认弹窗</button>
</Tooltip>

为什么这个方案优雅？ #

• 保持封装性：Tooltip的内部状态和方法不需要暴露给外部，只通过约定的函数参数传递必要的能力
• 灵活扩展：如果以后需要给弹窗传递其他方法（比如show或者自定义逻辑），只需要在函数参数里添加即可
• 类型安全：通过TypeScript的类型定义，确保content函数能正确接收和使用hide方法
• 轻量无依赖：不需要使用Context、Redux等状态管理工具，完全依赖React的组件组合特性

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