反应 - 图片库

Question

我正在 REACT 中从数据库中检索图像，并为底部带有缩略图的图像创建了一个容器。

我想知道如何使界面表现得像电子商务网站，然后单击缩略图，其各自的图像被加载到更大的区域中。

以下是 REACT 代码。

import React from "react";
import { Link } from "react-router-dom";
import ImageList from "../ImageList";

const ProductDetails = props => {
  const images = require.context(
    "../../../strapui/app/public/uploads",
    true,
    /\.jpg$/
  );
  const keys = images.keys();
  const svgsArray = keys.map(key => images(key));

return(

<div className="desContainer ">
    <div className="desimgContainer ">
        <ImageList
        styles="heroImage"
        imagePath={props.selectedItem[0].image[0]}
        svgsArray={svgsArray}
        />
    </div>
    <div className="thumbs">
        <ImageList
        styles="thumbnail"
        imagePath={props.selectedItem[0].image[0]}
        svgsArray={svgsArray}
        />
    </div>
    <div className="thumbs">
        <ImageList
          styles="thumbnail"
          imagePath={props.selectedItem[0].image[1]}
          svgsArray={svgsArray}
        />
    </div>
    <div className="thumbs">
        <ImageList
          styles="thumbnail"
          imagePath={props.selectedItem[0].image[2]}
          svgsArray={svgsArray}
        />
    </div>
</div>
);
};

export default ProductDetails;

使用以下代码从数据库中提取图像

import React from "react";

const ImageList = props => {
  if (
   props.imagePath === undefined ||
   props.imagePath === null ||
   props.imagePath.length === 0
  )
  return null;
const path = props.svgsArray.find(
str => str.indexOf(props.imagePath.hash) > 1
);


return <img src={path} alt={props.imagePath.hash} className={props.styles} />;
};

export default ImageList;

我想知道是否可以在单击缩略图时使用开关盒来显示图像？

它会起作用吗？如果可以的话，你能指导我怎么做吗？

Answer 1

使用 onClick 事件并将它附加到一些应该做一些代码魔术的函数。

例如：

largeSizeImage () {
    /* some code logic */
    }

return (

<div className="thumbs" onClick={largeSizeImage()}>
        <ImageList
          styles="thumbnail"
          imagePath={props.selectedItem[0].image[1]}
          svgsArray={svgsArray}
        />
    </div>

)