带有 React 的模态滑块

Question

我在这里没有想清楚，我需要一些帮助。我想我把事情复杂化了。 我想复制您在单击图像时可以在https://unsplash.com/ 中看到的功能，这是在图片数组中来回前进的能力，我在道具上犯了一些笨拙的错误。 到目前为止，我有图像网格和单击每个图像时弹出的模式。现在，我不能前进了。

我的代码看起来像

const HomePage = () => {
  
  const [data, setData] = useState([]);
 

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    axios.get(api).then((res) => {setData([...data, ...res.data])}).catch((err) => {
        alert("error");
      });
   
  };



  return (
    <>
      
          {data.map((item,idx) => (
            <Image
              url={item.urls.regular}
              user={item.user}
              key={idx}
              id={item.id}
            />
          ))}
        </div>

酷，我得到了包含数据的数组。完美，然后让我们进入图像组件 =>

const Image = ({ url, user, id }) => {
  const [currentImg, setCurrentImg] = useState("");
  const [show, setShow] = useState(false);
  

  const handleClose = () => setShow(false);

  const showModal = (id) => {
    fetch(`https://api.unsplash.com/photos/${id}?client_id=client_id`)
      .then((res) => res.json())
      .then((data) => {
        setCurrentImg(data.urls.regular);
        setShow(true);
      });
  };

  return (
    <>
    
      <img
        onClick={() => showModal(id)}
        src={url}
        alt=""
      />

      <Modal show={show} onHide={handleClose}> // somewhere inside this modal will go Prev & Next buttons

        <Modal.Header closeButton>
          <Modal.Title>{user.name}</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <img width="100%" src={currentImageUrl} alt="" />
        </Modal.Body>

      </Modal>
    <>

如您所见，如果我确实单击，我会得到一个带有图像的弹出窗口，因为我得到了带有 ID 的模态框，但首先，我认为这不是再次调用api，但最重要的是，我不知道如何为未来的 Next 和 Previous 按钮构建一个简单的解决方案。 我看过一些可以帮助我的包（例如反应灯箱），但我想学习逻辑！ 提前谢谢你。

Answer 1

您可以在模态中添加轮播，然后在图片中滑动。