有没有办法在 React 中访问组件的“this”子项？

问：

我正在使用类组件，我有一个主图片和一个来自数组的较小图片库。我为这些组件提供的结构是包含主图片和较小图片的所有图片容器，以及映射图库中的图片的较小图片容器（每张图片都是另一个组件）。 我想在所有图片组件中添加一个状态，用于处理主图片的更改，因此它将获取单击的小图片的索引并将其传输到主图片，因此它更改为单击的图片。 当我使用类组件时，我使用的是this.props，当我添加handleClick函数时，console.log（this.props）显示{productGal：Array（7）}。有什么方法可以获得“this”的点击子项？

我正在附加结构： 所有图片库

class ProductDetailPhotoGallery extends Component {
state ={
    imageSource: this.props.productGal[0]
} 

handlePictureChange = () => {
    console.log(this.props)
    this.setState({
    imageSource: this.props.productGal[3] //check if the picture changes
   })
}

render() {
    return (
        <ProductPhotoGalleryContainer>
            <ProductPageMiniatureImages 
            productGal={this.props.productGal}
            handlePictureChange={this.handlePictureChange}
            />
            <ProductPageDetailedImage 
            imageSrc={this.state.imageSource}
             />
        </ProductPhotoGalleryContainer>
    )
}

}

小图片容器

class ProductPageMiniatureImages extends Component {


render() {
    return (
        <ProductMiniatureImageContainer>
            {this.props.productGal.map((singlePrd, ind) => <ProductSmallImage 
            key={ind}
            id={ind}
            imageSrc={singlePrd} 
            imageAlt={'Product image'}
            handlePictureChange={this.props.handlePictureChange}
            />)}
        </ProductMiniatureImageContainer>
    )

小图片组件

class ProductSmallImage extends Component {

    render() {
        return (
            <>
                <SmallProductImage 
                onClick={this.props.handlePictureChange}
                src={this.props.imageSrc}
                alt={this.props.imageAlt}
                id={this.props.id}               
                />
            </>

        )
    }
}