ボタンと機能が別々のファイルにある場合、react.jsでポップアップウィンドウを作成するにはどうすればよいですか？

Question

問題の説明： Webページにボタンがあり、ボタンをクリックすると、画像を含むポップアップが表示されます。ボタンは "index.jsx"というファイルにあり、ボタンをクリックするとファイル "popUp.js"内の機能がトリガーされ、ウィンドウがポップアップします。したがって、本質的に、ボタンとPopUp関数は別々のファイルにあります。ポップアップの内容が画像ではなくテキストであることを除いて、https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modalと同じ効果を持つことになります

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

：

私はとしての機能を書きたいです。私は解決策の重点は、このWebページの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;