如何在动态子按钮上附加关闭功能？

Question

我有一个工具提示组件，它是动态内容的包装器。

我正在尝试将其用作弹出窗口，其中将包含“删除”和“取消”按钮。

我将删除和取消按钮作为子属性传递，问题是因为 关闭和打开状态 在工具提示组件中。

我需要在位于 Children 属性中的取消按钮上附加关闭功能。

需要帮助找到一个优雅的解决方案。

工具提示组件：


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

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  return (
    <div>
      <Tippy
        content={content}
        visible={visible}
        onClickOutside={hide}
        interactive
        {...props}
      >
        <div onClick={visible ? hide : show}>
        
          // =====>>> **Close button which be in children prop, need to attach hide() function**
          {children}

        </div>
      </Tippy>
    </div>
  );
};

这是调用工具提示组件并将按钮作为子项传递：


 

 <Tooltip
     content={
       <div className="popover-buttons">
          
          // Need to attach here **hide()** function from Tooltip coomponent
          <button>
              Cancel
          </button>
          
           <button>
              Delete
           </button>
        </div>
 </Tooltip>

Answer 1

您可以使传递给 Tippy 的内容道具成为一个组件，该组件具有作为道具传递给它的 hide() 功能

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

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  return (
    <div>
      <Tippy
        content={<Content hide={hide} />}
        visible={visible}
        onClickOutside={hide}
        interactive
        {...props}
      >
        <div onClick={visible ? hide : show}>
        
          // =====>>> **Close button which be in children prop, need to attach hide() function**
          {children}

        </div>
      </Tippy>
    </div>
  );
};

那么你有：

 <Tooltip
     content={ ({ hide }) =>
       <div className="popover-buttons">
          
          // Need to attach here **hide()** function from Tooltip coomponent
          <button onClick={hide}>
              Cancel
          </button>
          
           <button>
              Delete
           </button>
        </div>
 </Tooltip>

如何在动态子按钮上附加关闭功能？

How to attach close function on dyanmic children button?

javascript

components

typescript

reactjs

next.js