React Bootstrap 隐藏工具提示

Question

有没有办法默认隐藏OverlayTrigger/Tooltip元素？例如。overlay={this.state.show ? <Tooltip>showing</Tooltip> : null}有效，但在控制台上抛出警告：

该 propoverlay在 中被标记为必需OverlayTrigger，但其值为null

这是唯一的方法吗？

{!this.state.show ? {component} :
 <OverlayTrigger ...>
   {component}
 </OverlayTrigger>
}

Answer 1

这对我有用，仅在布尔值为 true 时显示。

<OverlayTrigger
  overlay={
    boolean ? (
      <Tooltip id={`tooltip`}>important message for user</Tooltip>
    ) : (
      <span></span>
    )
  }
>
{children}
</OverlayTrigger>

Answer 2

该OverlayTrigger组件必须overlay传递一个 prop。如果您不需要工具提示，那么您也不希望触发叠加层。因此，如果是假的，您需要将其删除this.state.show。

{this.state.show 
  ? <OverlayTrigger overlay={<Tooltip>showing</Tooltip>}>
      <button>Click me!</button>
    </OverlayTrigger>
  : <button>Click me!</button>
}

编辑：是的，更新中的代码就是执行此操作的方法。