Javascript 当我'；我在React应用程序中单击图像容器

我想动态渲染的图像，然后显示模式时，图像是点击，它应该关闭时，模式背景点击。请帮助我，我是新来的

我该怎么做才能让它像这样工作呢？这里面有什么问题吗。我被困在这里面了

每当从api加载图像并单击它们时，都不会发生任何事情

import React from "react";
import axios from "axios";
import { Modal } from "./Modal";

class MediaGallery extends React.Component {
  constructor() {
    super();
    this.state = {
      data: "",
      show: false,
      loading: true
    };
  }

  showModal = () => {
    this.setState({ show: true });
  };
  hideModal = () => {
    this.setState({ show: false });
  };

  componentDidMount() {
    const url =
      "https://amyapi.com";

    axios
      .get(url)
      .then(response => {
        this.setState({
          data: response.data,
          loading: false
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    let content;

    if (this.state.loading) {
      content = (
        <div>
          <div className="modal is-active">
            <div className="modal-background has-background-primary" />
            <div className="modal-content has-text-centered">
              <p classname="image is-48x48">
                <img
                  src="https://raw.githubusercontent.com/sharadcodes/css_snippets/master/Infinity-1.4s-200px.gif?token=AIXQ22JWJBKUHGP45ANQZ4K5SW46A"
                  alt=""
                />
              </p>
            </div>
          </div>
        </div>
      );
    } else {
      content = this.state.data.map((response, index) => {
        return (
          <div
            key={index}
            className="column is-one-quarter-desktop is-half-tablet"
            style={{ cursor: "zoom-in" }}
            onClick={this.showModal}
          >
            <Modal show={this.state.show} handleClose={this.hideModal}>
              <img src={response.acf.image} alt={response.acf.title} />
            </Modal>
            <div className="card cardimages">
              <div className="card-image" id="small-image-zoomable">
                <figure className="image is-3by2">
                  <img src={response.acf.image} alt={response.acf.title} />
                </figure>
                <div
                  className="card-content is-overlay is-clipped"
                  data={response.acf.title}
                >
                  <span className="tag is-primary">{response.acf.title}</span>
                </div>
              </div>
            </div>
          </div>
        );
      });
    }

    return (
      <div>
        <section className="hero is-medium is-bold has-background-black has-text-centered">
          <div className="hero-body">
            <div className="container">
              <h1 className="title is-1" style={{ color: "#FFD581" }}>
                Captured Moments
              </h1>
            </div>
          </div>
        </section>

        <div className="section" style={{ marginTop: "-1.2rem" }}>
          <div className="container">
            <div className="columns is-multiline" id="media-gallery">
              {content}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default MediaGallery;

从“React”导入React；
从“axios”导入axios；
从“/Modal”导入{Modal}；
类MediaGallery扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：“，
秀:假,，
加载：正确
};
}
showModal=（）=>{
this.setState（{show:true}）；
};
hideModal=（）=>{
this.setState（{show:false}）；
};
componentDidMount（）{
常量url=
"https://amyapi.com";
axios
.get（url）
。然后（响应=>{
这是我的国家({
数据：response.data，
加载：错误
});
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
让内容；
if（this.state.loading）{
内容=(


);
}否则{
content=this.state.data.map（（响应，索引）=>{
返回(
{response.acf.title}
);
});
}
返回(
捕捉的瞬间
{content}
);
}
}
导出默认媒体库；

且模式代码为

import React from "react";

export const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "is-active" : "";

  return (
    <div>
      <div className={{ showHideClassName } + " modal"} id="modal">
        <div className="modal-background" onClick={handleClose} />
        <div className="modal-content" style={{ width: "70vw!important" }}>
          <p className="image ">{children}</p>
        </div>
        <button
          className="modal-close is-large"
          aria-label="close"
          onClick={handleClose}
        />
      </div>
    </div>
  );
};

从“React”导入React；
导出常量模式=（{handleClose，show，children}）=>{
const showHideClassName=show？“处于活动状态”：“”；
返回(
{children}
);
};

将模型置于三元条件下以显示。表示类似于三元条件中的何处？请尝试此className={

modal${showHideClassName}

}包含模板文本。它应该是，

className={${showHideClassName}modal`}

。注意``characters ie Template literals:.@AniruddhaShevle它正在工作，但模型现在没有关闭。怎么办？