Как смешать компоненты React- bootstrap Dropdown с компонентом NavLink в Typescript? - PullRequest
Новая
       10

Как смешать компоненты React- bootstrap Dropdown с компонентом NavLink в Typescript?

0 голосов
/ 16 апреля 2020

На веб-сайте 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>

Что я должен сделать, чтобы это заработало?

1 Ответ

0 голосов
/ 16 апреля 2020

Похоже, что добавление пакета https://www.npmjs.com/package/@types / Reaction- bootstrap решает эту проблему.

...