javascript - 如何将 Vanilla JS 添加到我的 React 应用程序中以创建图像模态弹出窗口？

Question

我正在为我使用 React 制作的网站创建一个图像网格，我想添加一个模式功能以将每个图像作为模式弹出窗口查看。为此，我需要将一些 Vanilla JS 与 CSS 和 HTML 结合使用。这是我要使用的js:

// Select the modal
var modal = document.getElementById('myModal');

// Get the image inside the modal
var img = document.getElementsByClassName('image');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Select the close button
var span = document.getElementsByClassName("close");

// Close Button 
span.onclick = function() { 
  modal.style.display = "none";
}

如何将其与应用程序的其余部分集成？

编辑: 这是我正在开发的组件:

import React from "react";
import "../stylesheets/Photos.scss";


const Photos = () => {
  return (
  <div className="photos_container">
      <h1 className="photos_title">PHOTO GALLERY</h1>
      <div className="row"> 
        <div className="column">
          <img className='image'src="../assets/photos_page/photo2.jpg"/>
          <img className='image' src="../assets/photos_page/photo3.jpg"/>
          
        </div>
        <div className="column">
          <img className='image' src="../assets/photos_page/photo4.jpg"/>
          <img className='image' src="../assets/photos_page/photo5.jpg"/>
          <img className='image' src="../assets/photos_page/photo6.jpg"/>
        </div> 
        <div className="column">
          <img className='image' src="../assets/photos_page/photo7.jpg"/>
          <img className='image' src="../assets/photos_page/photo8.png"/>
          <img className='image' src="../assets/photos_page/photo9.jpg"/>
        </div>
        <div className="column">
          <img className='image' src="../assets/photos_page/photo10.png"/>
          <img className='image' src="../assets/photos_page/photo11.jpg"/>
        </div>
      </div>
      {/* modal */}
      <div id='mymodal' className='modal'>
        <span className='close'>&times;</span>

        <img className='modal-content' id="img01"/>

        <div id='caption'></div>
      </div>
  </div>
  );
};

export default Photos;

Answer 1

有人比我先一步，但我仍然会在这里留下我的答案版本，以防您发现它有帮助。我不会以上述方式选择文档元素，因为有更简单且更具声明性的方式。您想要做的是将这个组件更改为有状态组件，其中包含一个状态属性，例如“showmodal”。当它为 true 时，应该显示模式。然后，您可以在 onClick 函数中使用 this.setState({ showmodal: true, slectedImage: yourImage }) 切换状态并设置单击的图像。一个简单的绝对定位容器应该可以满足模态容器的需要。

下面是此类组件的示例。

  const images = [
  {
    uri:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTm3CuNzOrmWhos3MXI0v_KkyO_xrZ5Y8hFxSYGj_6OtUygZUUX"

  },
  {
    uri:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR_Fg_lMrPjMa1duHXnvFnZOtsn883LGLD7c2-CwKdfFXAoveQnQ"
  }
];

class App extends React.Component {

  state = {
    showmodal: false,
    selectedImage: undefined
  };

  render() {
    // 
    return (
      <div style={{ height: "100vh"}}>
        {images.map(i => (
          <img
            key={i.uri}
            src={i.uri}
            style={{ margin: 5 }}
            onClick={() => this.setState({ showmodal: true, selectedImage: i })}
          />
        ))}
      {this.state.showmodal &&   
        <div
          onClick={() => this.setState({ showmodal: false })}
          style={{
            display: 'flex',
            position: "absolute",
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: "rgba(0,0,0,0.5)",
            justifyContent: 'center', alignItems: 'center'
          }}
        >
          <div style={{ height: 300, width: 500, backgroundColor: '#fff' }}>
            <img src={this.state.selectedImage.uri} style={{ flex: 1}} />
            <h3>Place any content here</h3>
          </div>
        </div>}
      </div>
    );
  }
}

React.render(<App />, document.getElementById("app"));

我没有重构样式，所以你可以看到每个 div 正在做什么，作为一个 super 基本的例子，你可以在 codepen 中查看。另外，我同意上面的可视化尝试重构您的列，以便您可以以完全相同的方式呈现它们，并减少重复。

希望对你有帮助!