Question

我正在构建一个组件，它是一个图库，包含主图库图像和主图像下的缩略图列表。该组件将在多个页面中使用，因此每个页面都有自己的缩略图/图像。我已经研究了如何根据使用redux和商店的页面将正确的图像输入到库中。但是当我点击相应的缩略图时，我无法弄清楚主图像改变的功能，任何想法或建议我如何处理这个？

   import React, { Component } from 'react';
import { connect } from 'react-redux';

class Gallery extends Component {

    render() {

        let img = this.props.bouq.map((el, index) => {
            return(
                <img src={"/images/" + el + ".jpg"} alt="." key={index}/>
            );     
        })

        return(
            <section className="gallery">

                    <div className="mainImage">
                        <img src='/images/bouquets.jpg' alt="."/>
                    </div>

                    <div className="thumbnails">
                        {img}   
                    </div>


            </section>

        );

    }
}

const mapStateToProps = state => {
    return {
        bouq: state.bouquets
    };
}

export default connect(mapStateToProps)(Gallery);

Answer 1

您可以利用map内部每个元素的访问权限，点击元素，您可以在redux商店中更新mainImage。

您还需要创建一个更新mainImage的操作（取决于您如何管理redux操作）

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { updateMainImage } from './actions'

class Gallery extends Component {
  updateMainImage = tumbnail => () => {
    this.props.dispatch(updateMainImage(thumbnail))
  }

  render() {
    const { mainImg, bouq } = this.props

    return (
      <section className="gallery">
        <div className="mainImage">
          <img src={`/images/${mainImage}.jpg`} alt={mainImage} />
        </div>

        <div className="thumbnails">
          {bouq.map(thum => (
            <img
              key={thumb}
              src={`/images/${thumb}.jpg`}
              alt={thumb}
              onClick={this.updateMainImage(thumb)}
            />
          ))}
        </div>
      </section>
    )
  }
}

const mapStateToProps = state => {
  return {
    bouq: state.bouquets,
    mainImage: state.mainImage,
  }
}

export default connect(mapStateToProps)(Gallery)

React JS缩略图库

1 个答案: