时间戳

首页 > 解决方案 > 如何使用带有打字稿的 React-bootstrap 模态

reactjs - 如何使用带有打字稿的 React-bootstrap 模态

问题描述

我正在使用反应、反应引导和打字稿。我收到以下错误：

JSX 元素类型“模态”没有任何构造或调用签名。TS2604

该代码是来自 react-bootstrap 网站的非常样板，如果我使用 javascript 则可以使用：

import React, { Component } from "react";
import Modal from 'react-bootstrap';

class InfoModal extends Component{
    state = { show: true }

    render(){
     <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal! 
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    }
}

标签： reactjstypescriptreact-bootstrap

解决方案

有一些问题，所以我希望这可以帮助任何有同样问题的人：

  1. 导入错误应该是：import { Modal, Button } from 'react-bootstrap';
  2. onHide={() => { this.handleClose() }}

推荐阅读