在 React-bootstrap 的 OverlayTrigger 放置属性上使用字符串变量时出现问题

Problem with using string variable on React-bootstrap's OverlayTrigger placement attribute

React-Bootstrap 版本的 OverlayTrigger 组件出现意外错误。 5.1.1 我正在尝试使用 overlaytrigger 和一个按钮创建我自己的自定义按钮组件。除了为工具提示放置使用变量外,一切都按我想要的方式工作。这可能只是因为我是一个 typeScript 菜鸟,但当我看到这样的错误消息时,我不知道该怎么办。有没有其他人以前见过这个问题,知道解决方法或者可能知道如何处理这些错误消息?

OverlayTrigger 的放置变量是一种声明为 Placement 的类型,如果您想了解更多信息,您可以检查任何类型 (例如通过在输入变量上按 F12).

对于您的示例,您可以使用字符串值 "bottom" 指定位置,因为该值派生自 BasePlacement "right" | "top" | "bottom" | "left" 并且该值能够解析为这种类型。

然而,当尝试设置您的变量时 {tooltipPlacement} 它被解析为字符串类型,因为这是它声明的内容,您的编译器会为您提供此信息。

Type 'string' is not assignable to type 'Placement | undefined'.ts(2322)

解决方案

解决这个问题的一种方法是告诉编译器你想把这个变量转换成什么类型​​,你知道 "bottom" 是解析为 Placement[= 类型的有效值32=].

placement={tooltipPlacement as Placement}