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

【问题标题】：TypeScript react - JSX element type 'Modal.Header' does not have any construct or call signaturesTypeScript react - JSX 元素类型“Modal.Header”没有任何构造或调用签名
【发布时间】：2021-07-10 16:20:52
【问题描述】：

我正在学习 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>

非常感谢任何帮助！

【问题讨论】：

我复制并粘贴了您的代码，但没有看到任何错误。首先确保您的rsuite 软件包是最新版本（4.9.3）。如果这不能解决问题，那么看看您是否可以创建一个重现问题的 CodeSandbox。

标签： javascript reactjs typescript modal-dialog rsuite

【解决方案1】：

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

【讨论】：