React Bootstrap下拉列表无法读取属性“ Item”

Question

我正在使用React-Bootstrap作为下拉菜单，但是它不是用chrome渲染的。我收到一条错误消息。即使我已经导入了Dropdown组件，似乎也无法使用Dropdown.Item。

  

未捕获的TypeError：无法读取未定义的属性“ Item”
      在MenuItem.render（MenuItem.tsx：20）
      在finishClassComponent（react-dom.development.js：13538）
      在updateClassComponent（react-dom.development.js：13501）
      在beginWork（react-dom.development.js：14090）
      在performUnitOfWork（react-dom.development.js：16416）
      在工作循环（react-dom.development.js：16454）
      在HTMLUnknownElement.callCallback（react-dom.development.js：145）
      在Object.invokeGuardedCallbackDev（react-dom.development.js：195）
      在invokeGuardedCallback上（react-dom.development.js：248）
      在replayUnitOfWork（react-dom.development.js：15745）

这是我的代码：

import * as React from 'react';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

export interface Props {
    name: string;
}

export class MenuItem extends React.Component<Props> {
constructor(props: Props) {
    super(props);
}

render() {
    return (
        <div className="wc-menuitem">
            <DropdownButton id="dropdown-basic-button" title="Dropdown button">
            <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </DropdownButton>
        </div>
    );
    }
}

任何帮助将不胜感激。