reactjs - 在 React-bootstrap 的 OverlayTrigger 的 placement 属性上使用字符串变量的问题

我在使用 React-Bootstrap 5.1.1 版本的 OverlayTrigger 组件时遇到了意外错误。我正在尝试使用 OverlayTrigger 和按钮创建我自己的自定义按钮组件。一切都按我想要的方式工作，除了为 tooltip placement 使用变量时出现问题。可能只是因为我还是 TypeScript 新手，但当看到这样的错误信息时，我不知道该怎么办。有没有人以前遇到过这个问题，知道解决方法，或者知道一般情况下如何处理这样的错误信息？

答案＃1

OverlayTrigger 的 placement 变量是一个声明为 Placement 的类型，如果你想获取更多信息，可以检查任何类型 （例如，通过在输入变量上按 F12）。

在您的示例中，您可以使用字符串值 "bottom" 指定位置，因为该值来源于 BasePlacement "right" | "top" | "bottom" | "left"，并且该值能够解析为此类型。

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

类型 'string' 不能赋值给类型 'Placement | undefined'。ts(2322)

解决方案

解决这个问题的一种方法是告诉编译器你想将此变量转换为什么类型，你知道 "bottom" 是一个可以解析为 Placement 类型的有效值。

placement={tooltipPlacement as Placement}