React函数组件onClick内联回调触发后Flyout无法关闭问题

问题原因 #

你当前的写法存在两个核心问题：

• 你给OptionPanel组件传递了onClick回调，但是OptionPanel并没有接收、消费这个prop，也没有把它绑定到内部<li>元素的点击事件上，closeFlyout逻辑从始至终都不会执行，自然无法关闭Flyout。
• 你之前透传onClickOption时功能正常，本质是因为透传场景下你将这个回调绑定到了<li>的点击事件中，点击时会执行关闭逻辑，和你现在写内联回调但不消费的场景有本质区别。

修复方案 #

修改OptionPanel组件，接收并消费传入的onClick属性即可：

// 修改OptionPanel的参数，接收onClick属性
export const OptionPanel: FC<OptionPanelProps> = ({ onClick = noOp }) => {
  const openNewTab = (): void => {
    window?.open(`google.com`, '_blank');
    // 打开新标签后执行传入的关闭回调
    onClick();
  };
  return (
    <div>
      <ul>
        <li onClick={() => openNewTab()}>1</li>
        <li onClick={() => openNewTab()}>2</li>
        <li onClick={() => openNewTab()}>3</li>
      </ul>
    </div>
  );
};

额外排查点 #

如果修改后依然有问题，可检查你使用的Flyout组件的onDismiss触发逻辑：如果onDismiss仅在点击Flyout外部区域时触发，点击Flyout内部元素默认不会触发关闭，这种场景下就必须手动在内部元素的点击事件中执行关闭逻辑。

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