如何將Vanilla JS添加到我的react應用程序中以創建Image Modal彈出窗口？

Question

我正在使用React為網站Im創建一個圖像網格，我想添加一個模式功能，以將每個圖像作為模式彈出窗口查看。 為此，我需要將一些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”。 如果為真，則應顯示模態。 然后，您可以在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在做什么，作為一個超級基本的示例，您可以在codepen中查看。 另外，我同意上面的viz嘗試重構您的列，以便您可以以完全相同的方式呈現它們，並減少重復。

希望能幫助到你！

Answer 2

React中的所有內容都是JavaScript，因此

<div style={{display: this.state.showModal ? 'block' : 'none' }}>
  <span onClick={() => {this.state.showModal = false;}}>&times;</span>
  <img src={this.state.currentImage}/>
  <div>{this.state.currentCaption}</div>
</div>

然后在點擊圖像時分別使用setState設置currentImage和currentCaption。

您還應該考慮以編程方式編寫列和圖像的jsx，以便使其簡潔。