Question

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

我想知道如何使界面表现得像eCom网站一样，因此，单击缩略图，其相应的图像将被加载到较大的区域。

下面是REACT代码。

UNION

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

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;

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

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

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>

)

反应-图片库

1 个答案: