当按钮和函数位于单独的文件中时，如何在react.js中创建弹出窗口？

Question

问题描述：网页上有一个按钮，当我单击该按钮时，将出现一个包含图像的弹出窗口。该按钮位于名为“ index.jsx”的文件中，单击该按钮将在文件“ popUp.js”中触发一个函数，该函数将弹出一个窗口。因此，实质上，按钮和PopUp函数位于单独的文件中。

我想将函数编写为：

export function PopUp (image: Image){
  return{
    ...
  };
}

它将具有与https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal相同的效果，只是弹出窗口的内容是图像而不是文本。我猜想解决方案的重点是将此网页上的CSS转换为react.js，但不确定语法应如何。

关于如何实现这一点的任何想法？

Answer 1

您可以使用react-modal轻松实现 。这是一个示例，作为奖励，我在单击打开的图像时添加了关闭模式。图像src及其描述应作为props传递到数据对象中。

PopUp.js：

import React from 'react';
import Modal from 'react-modal';
import ModalButton from './modal-button';
import style from './style.css';

class PopUp extends React.Component {
  constructor() {
    super();

    this.state = { modalOpened: false };
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState(prevState => ({ modalOpened: !prevState.modalOpened }));
  }

  render() {
    const { data } = this.props;
    return (
      <div className={style.modalWrapper}>
        <ModalButton handleClick={this.toggleModal}>
          click to open modal
        </ModalButton>
        <Modal
          className={{ base: [style.base]}}
          overlayClassName={{ base: [style.overlayBase] }}
          isOpen={this.state.modalOpened}
          onRequestClose={this.toggleModal}
          contentLabel="Modal with image"
        >
          <img
            onClick={this.toggleModal}
            src={data.src}
            alt='image displayed in modal'
          />
          <span className={style.text}>{data.description}</span>
        </Modal>
      </div>
    );
  }
}

export default PopUp;

和分隔的按钮，根据您的要求：

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

const ModalButton = props => (
  <button className={style.button} onClick={props.handleClick}>
    {props.children}
  </button>);

export default ModalButton;