在react中的活动图像之间进行选择

vddsk6oq 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(251)

目前，我一直在试图让盖茨比通过点击切换产品页面上的主图像。我看到很多解决方案都使用state并通过状态操作切换活动类，但由于某些原因，我无法将state或任何其他函数添加到我当前的js文件中。我使用盖茨比和盖茨比图像来渲染图像。
我现在想要的是能够在这三幅图像中进行选择，并使所选图像成为大的主图像
这是我的代码，我知道它很凌乱，但一直在摆弄它，试图让它工作

const Product = ({ data }) => {
    const post = data.shopifyProduct;

    return (
        <Layout>
            <h1>{post.title}</h1>
            <h5>Price: <span>{post.variants[0].price}</span></h5>
            <div
              dangerouslySetInnerHTML={{ __html: post.description }}
            />
            <GatsbyImage id="main" image={getImage(post.images[0])} alt={post.images.altText} />
              <div class="gallery">
                <GatsbyImage id="img-2" image={getImage(post.images[0])} alt={post.images.altText} />
                <GatsbyImage id="img-2" image={getImage(post.images[1])} alt={post.images.altText} />
                <GatsbyImage id="img-2" image={getImage(post.images[2])} alt={post.images.altText} />
              </div>
        </Layout>
    );
  };

Product.propTypes = {
    data: PropTypes.object.isRequired,
};

谢谢你的检查

JavaScript reactjs gatsby

来源：https://stackoverflow.com/questions/68308266/select-between-active-images-in-react

1条答案

按热度按时间

vulvrdjw1#

您应该能够使用react useState 钩子(https://reactjs.org/docs/hooks-state.html):

// If you haven't already:
// import * as React from 'react'

const Product = ({ data }) => {
    const post = data.shopifyProduct;
    const [imgIndex, setImgIndex] = React.useState(0 /* or your default */)

    return (
        <Layout>
            <h1>{post.title}</h1>
            <h5>Price: <span>{post.variants[0].price}</span></h5>
            <div
              dangerouslySetInnerHTML={{ __html: post.description }}
            />
            <GatsbyImage id="main" image={getImage(post.images[imgIndex])} alt={post.images.altText} />
              <div class="gallery">
                <GatsbyImage onClick={() => { setImgIndex(0) }} id="img-2" image={getImage(post.images[0])} alt={post.images.altText} />
                <GatsbyImage  onClick={() => { setImgIndex(1) }} id="img-2" image={getImage(post.images[1])} alt={post.images.altText} />
                <GatsbyImage  onclick={() => { setImgIndex(2) }} id="img-2" image={getImage(post.images[2])} alt={post.images.altText} />
              </div>
        </Layout>
    );
  };

Product.propTypes = {
    data: PropTypes.object.isRequired,
};

赞(0）回复(0）举报 2021-09-13

我来回答

在react中的活动图像之间进行选择

1条答案

相关问题

热门标签

最新问答