如何在 Typescript 中將 React-bootstrap Dropdown 組件與 NavLink 組件混合使用？

Question

在 React-bootstrap 網站上，他們給出了一個混合 Dropdown 組件與 NavLink 和 NavItem 組件的示例，如下所示：

<Dropdown as={NavItem}>
  <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Hello there!</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

但是當我在我的代碼中添加這樣的例子時：

import * as React from "react";
import { NavDropdown, Dropdown, NavItem, NavLink } from "react-bootstrap";

export default function ReportingAvatar() {
    return (
        <Dropdown as={NavItem}>
            <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item>Hello there!</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

我收到錯誤：

TypeScript error in .../avatar.tsx(7,21):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<BsPrefixComponentClass<"button", ButtonProps>, BsPrefixProps<BsPrefixComponentClass<"button", ButtonProps>> & DropdownToggleProps>>): DropdownToggle<...>', gave the following error.
    Type 'typeof NavLink' is not assignable to type 'BsPrefixComponentClass<"button", ButtonProps>'.
      Construct signature return types 'NavLink<any>' and 'Component<ReplaceProps<"button", BsPrefixProps<"button"> & ButtonProps>, any, any>' are incompatible.
        The types of 'props.onSelect' are incompatible between these types.
          Type 'SelectCallback | undefined' is not assignable to type '((event: SyntheticEvent<HTMLButtonElement, Event>) => void) | undefined'.
            Type 'SelectCallback' is not assignable to type '(event: SyntheticEvent<HTMLButtonElement, Event>) => void'.
  Overload 2 of 2, '(props: ReplaceProps<BsPrefixComponentClass<"button", ButtonProps>, BsPrefixProps<BsPrefixComponentClass<"button", ButtonProps>> & DropdownToggleProps>, context?: any): DropdownToggle<...>', gave the following error.
    Type 'typeof NavLink' is not assignable to type 'BsPrefixComponentClass<"button", ButtonProps>'.  TS2769

     5 |    return (
     6 |        <Dropdown as={NavItem}>
  >  7 |            <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
       |                             ^
     8 |            <Dropdown.Menu>
     9 |                <Dropdown.Item>Hello there!</Dropdown.Item>
    10 |            </Dropdown.Menu>

我應該怎么做才能讓它工作？

Answer 1

似乎添加https://www.npmjs.com/package/@types/react-bootstrap package 解決了這個問題。