javascript - 当按钮和功能位于单独的文件中时，如何在 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 轻松完成.这是一个示例，作为奖励，我在单击打开的图像时添加了关闭模式。 Image src 及其描述应该作为数据对象中的 props 传递给 popUp 组件。

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;