我正在使用 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>
);
}
}
这是我遇到的错误:
ERROR in ./src/components/header/index.tsx (11,10): error TS2604: JSX element type 'MyModal' does not have any construct or call signatures.
我环顾四周,没有看到任何采用基于类的方法解决相同问题的方法。我所看到的似乎是基于缺少的渲染功能。我确实尝试过公开渲染,但没有帮助。
最佳答案
该错误消息表示您导入不正确。你应该导出你的类并正确导入它
export default class MyModal extends ....
然后当你导入它的时候
import MyModal from './my-modal';
关于reactjs - typescript 中的 react 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43434806/