TypeScript react - JSX 元素类型 'Modal.Header' 没有任何构造或调用签名

Question

我正在学习TypeScript和React的开发。我将rsuite用于图形组件——到目前为止，我已经使用了该套件中的大量组件，没有任何问题。但现在我正试图创建一个模态对话框，却不知道如何在设置中使用modal.*组件。

我尝试了我能找到的每一个建议，三次检查了我的导入和语法，在我看来一切都应该正常，但我收到了错误消息"；JSX元素类型"Modal.Header"没有任何构造或调用签名&"；。Rsuite声称它完全支持typescript和react 16+，这个库中的其他组件运行良好，所以我很确定错误在我这边。

以下是有问题的组件：

import React, { Component } from 'react';
import { Modal, Button } from 'rsuite';

class GroupTransactionDialog extends Component<any> {
render() {
return <div className="modal-container">
<Modal open={true} onClose={this.props.onClose}>
<Modal.Header>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p></p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onClose} appearance="primary">Save</Button>
<Button onClick={this.props.onClose} appearance="subtle">Cancel</Button>
</Modal.Footer>
</Modal>
</div>
}
}
export default GroupTransactionDialog;

错误如下：

TypeScript error in /home/johny/Developement/Js/finance2/src/components/GroupTransactionDialog.tsx(9,18):
JSX element type 'Modal.Header' does not have any construct or call signatures.  TS2604
7 |         return <div className="modal-container">
8 |             <Modal open={true} onClose={this.props.onClose}>
>  9 |                 <Modal.Header>
|                  ^
10 |                     <Modal.Title>Modal Title</Modal.Title>
11 |                 </Modal.Header>
12 |                 <Modal.Body>

非常感谢您的帮助！

Answer 1

多亏了Linda Paiste的评论，我发现我使用的是rsuite 5.0.0 alpha版本，而不是稳定的版本。在重新安装4.9.3之后，modal开始按预期工作！