Question

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

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;

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

编辑：这是我正在处理的组件：

{{1}}

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，以便使其简洁。

如何将Vanilla JS添加到我的react应用程序中以创建Image Modal弹出窗口？

2 个答案: