javascript - TypeScript react - JSX 元素类型“Modal.Header”没有任何构造或调用签名
问题描述
我正在学习 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>
任何帮助是极大的赞赏!
解决方案
由于 Linda Paiste 的评论,我发现我使用的是 rsuite 5.0.0 alpha 版本而不是稳定版本。重新安装 4.9.3 后,modal 开始按预期工作!
推荐阅读
- unicode - Java 不支持日文、俄文、西班牙文、法文和意大利文等多种语言的特殊字符编写 excel 文件
- unity3d - 如何找出射弹的人
- c++ - 输入验证:需要整数但输入字符串。C++
- java - 覆盖 equals() 时的 Java 类型转换问题
- javascript - 如何从消息中获取附件,然后抓取它并从机器人发送?
- coinbase-api - 使用 api 在 coinbase 上进行交易、转换
- powershell - 在 PowerShell 中使用参数别名
- python - 从日/月/年获取日期,然后获取日期的名称(从生成的日期)
- javascript - 如何将 web 流从 react-native 发送到 tensor-flow 库?
- python - datetime.datetime 对象不可调用