打字稿中的反应模态答案

【问题标题】：React Modal in Type Script打字稿中的反应模态
【发布时间】：2017-09-12 02:05:18
【问题描述】：

我正在使用 react-modal 在 Typescript React 设置中制作模式。

这是模态文件：

import * as React from 'react';
import * as ReactModal from 'react-modal';

class MyModal extends React.Component<any, any> {
  constructor () {
    super();
    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  public modalState () {
    const stateRef = this.state;
    return stateRef["showModal"];
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal
          isOpen={this.modalState()}
          contentLabel="Minimal Modal Example"
        >
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

这就是我使用它的方式：

import * as React from 'react';
import {UndoRedo} from './undo-redo';
import * as MyModal from './my-modal';

export class Header extends React.PureComponent<any, {}> {
  public render() {
    return (
      <header className="header">
        Header
        <UndoRedo/>
        <MyModal/>
      </header>
    );
  }
}

这是我得到的错误：

./src/components/header/index.tsx (11,10) 中的错误：错误 TS2604: JSX 元素类型“MyModal”没有任何构造或调用签名。

我环顾四周，没有看到任何采用基于类的方法来解决相同问题的东西。我所看到的似乎是基于缺少的渲染功能。我确实尝试过公开渲染，但没有帮助。

【问题讨论】：

标签： reactjs typescript jsx

【解决方案1】：

该错误消息意味着您正在不正确地导入它。你应该导出你的类并正确导入它

export default class MyModal extends ....

然后当你导入它时

import MyModal from './my-modal';

【讨论】：

【解决方案2】：

你也可以尝试通过以下方式导入 React Modal

import ReactModal = require('react-modal');

【讨论】：