使用rc-tooltip组件在Storybook中触发React.Children.only错误求助

我基于rc-tooltip库封装了DefaultTooltip组件，代码如下：

const DefaultTooltip = (props: BaseTooltipProps) => {
  const {
    placement = "bottomRight",
    header,
    body,
    trigger = "hover",
    destroyTooltipOnHide = true,
    mouseLeaveDelay = 0,
  } = props;

  const overlay = header ? (
    <span>
      {header}
      {body}
    </span>
  ) : (
    <>
      <div>body</div>
    </>
  );

  return (
    <StyledTooltip
      placement={placement}
      overlay={overlay}
      trigger={trigger}
      destroyTooltipOnHide={destroyTooltipOnHide}
      mouseLeaveDelay={mouseLeaveDelay}
    />
  );
};

export default DefaultTooltip;

在Storybook中编写的示例代码：

export const TooltipStory: Story = () => {
  return (
    <div>
      TEST TEST TEST
      <Tooltip
        placement="bottomRight"
        header="test test test"
        body="ok ok ok"
        trigger="hover"
        destroyTooltipOnHide={true}
        mouseLeaveDelay={0}
      />
    </div>
  );
};

运行时出现错误提示：React.Children.only expected to receive a single React element child，已将Tooltip包裹在div中仍无法解决，以下是其他排查思路：

• 检查rc-tooltip的核心要求：rc-tooltip组件必须接收单个React元素作为子节点（即触发提示显示的目标元素）。你当前的Story中，<Tooltip>没有包裹任何子元素，而是和文本TEST TEST TEST同级存在，这才是触发错误的根本原因，和外层div无关。

• 修复DefaultTooltip的结构：封装的DefaultTooltip没有传递子元素给底层的StyledTooltip（rc-tooltip实例），需要修改组件逻辑，接收并传递子元素：

  const DefaultTooltip = (props: BaseTooltipProps & { children: React.ReactNode }) => {
    const {
      placement = "bottomRight",
      header,
      body,
      trigger = "hover",
      destroyTooltipOnHide = true,
      mouseLeaveDelay = 0,
      children, // 新增接收子元素属性
    } = props;
  
    // overlay逻辑保持不变
  
    return (
      <StyledTooltip
        placement={placement}
        overlay={overlay}
        trigger={trigger}
        destroyTooltipOnHide={destroyTooltipOnHide}
        mouseLeaveDelay={mouseLeaveDelay}
      >
        {children} {/* 将子元素传递给rc-tooltip */}
      </StyledTooltip>
    );
  };
  

• 修正Storybook的使用方式：使用Tooltip时，必须把触发提示的元素作为Tooltip的子节点，而非让Tooltip单独存在：

  export const TooltipStory: Story = () => {
    return (
      <div>
        <Tooltip
          placement="bottomRight"
          header="test test test"
          body="ok ok ok"
          trigger="hover"
          destroyTooltipOnHide={true}
          mouseLeaveDelay={0}
        >
          <span>TEST TEST TEST</span> {/* 触发元素作为Tooltip的子节点 */}
        </Tooltip>
      </div>
    );
  };
  

• 校验overlay的结构（次要）：当前错误并非overlay导致，但如果后续body传入多个未包裹的元素，可能引发类似问题，建议始终用单个容器（如span、div）包裹overlay内容。

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