实现react-bootstrap选项卡时出现TypeScript错误

Question

在create-react-app typescript应用程序中实现react-bootstrap Tabs时，我遇到了一个问题。下面是我的代码。

import React from "react";
import { Link } from "react-router-dom";
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tabs';

export function Sonnet(props: any) {
    return (<div>Test</div>);
}
const AddCampaigns: React.FunctionComponent<any> = (props: any) => {

    return (
        <div className='row'>
            <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
                <Tab eventKey="home" title="Home">
                    <Sonnet />
                </Tab>
                <Tab eventKey="profile" title="Profile">
                    <Sonnet />
                </Tab>
                <Tab eventKey="contact" title="Contact" disabled>
                    <Sonnet />
                </Tab>
            </Tabs>
        </div>
    );
}

export default AddCampaigns;

以下是错误消息：

TypeScript error in src/components/templates/tab/index.tsx(14,22):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<BsPrefixComponentClass<"div", NavProps>, BsPrefixProps<BsPrefixComponentClass<"div", NavProps>> & TabsProps>>): Tabs<...>', gave the following error.
    Type '{ children: Element; eventKey: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
      Property 'eventKey' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
  Overload 2 of 2, '(props: ReplaceProps<BsPrefixComponentClass<"div", NavProps>, BsPrefixProps<BsPrefixComponentClass<"div", NavProps>> & TabsProps>, context?: any): Tabs<...>', gave the following error.
    Type '{ children: Element; eventKey: string; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.
      Property 'eventKey' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs<BsPrefixComponentClass<"div", NavProps>>> & Readonly<...> & Readonly<...>'.  TS2769

有什么办法来解决这个问题吗？谢谢

编辑:更新正确的代码

Answer 1

在提供的代码中，您从错误的目录导入了Tab组件：react-bootstrap/Tabs而不是react-bootstrap/Tab

import Tab from 'react-bootstrap/Tab'; 

您也可以像这样导入它：

import { Tabs, Tab } from "react-bootstrap";