reactjs - 反应 TypeScript 模态

Question

模态的.tsx

import React from 'react';
import './Modal.css'

interface IProps {
    show?: boolean;
    handleClose?: any;
    children: any;
};

const Modal:React.SFC<IProps> = ({ handleClose, show, children }: IProps) => {
    const showHideClassName = show ? "display-block" : "display-none";
    return <div className={showHideClassName}>
        <section className="modal-main">
          {children}
            <button onClick={handleClose}>close</button>
        </section>
      </div>;
};

export default Modal;

infoPresenter.tsx

import { Icon } from 'antd';
import React from 'react';
import Modal from '../Modal';
import './Info.css';

class Info extends React.Component{

  public state = {
    show: false
  };

  public showModal = () => {
    this.setState({ show:true })
  }

  public hideModal = () => {
    this.setState({ show:false })
  }

  public render(){
    return (
      <section className="Info">
        <div className="InfoTitle">
          <h1>Philociphy</h1>
          <p>
            lorem ipsum
      </p>
        </div>
        <div className="WholeBox">
          <div className="BoxLeft" onClick={this.showModal}>
            <Modal show={this.state.show} handleClose={this.hideModal}>
                <p>Modal</p>
                <p>Data</p>
              </Modal>
            <p>VISION</p>
            <Icon type="arrow-left" />
          </div>

          <div className="BoxRight">
            <p>VALUE</p>
            <Icon type="arrow-right" />
          </div>
        </div>
      </section>
  )
  }
}

 export default Info;

我想做模态。它有效但不会消失。我检查了我所有的状态和道具，但找不到问题。我不知道我的代码哪里出了问题。

请找到并修复它。如果您有更多制作模态的好主意，请告诉我如何在打字稿中做出反应。

感谢所有关注这个问题的人

标签： reactjstypescriptmodal-dialogstate