如何在 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 解决了这个问题。