javascript - 如何在功能组件中存储 React Refs

Question

在我的照片/主组件中，我通过一个对象进行映射，该对象来自我的状态，称为过滤图像，包含从数据库中检索的图像数据的实例。对于每个实例，我动态生成一个 React 组件“ImageItem”，它将向 DOM 显示图像。我需要做的是将“ImageItem”组件生成的 DOM 元素存储在主组件中。我遇到过能够使用 Reacts 的 ref 以及 useRef 和 forwardRef Hooks，但我想知道如何将这些 ref 存储在一个数组中。任何帮助将不胜感激！！！

照片.js

const Photos = ({ photos: { albums, images, filteredImages, loadingAlbums, loadingImages, currentAlbum }, getAlbums, getImages }) => {

    const imageElement = useRef(null);

    // When photos page is initially loaded
    useEffect(() => {
        getAlbums();
        getImages();
        // eslint-disable-next-line
    }, []);

    // When filteredImages is changed
    useEffect(() => {
        if (filteredImages !== null) {
            console.log(imageElement.current);
        }
    }, [filteredImages]);

    return (

            <Masonry breakpointCols={breakpointColumnsObj} className="my-masonry-grid mx-5" columnClassName="my-masonry-grid_column">
                { filteredImages.map(image => <ImageItem ref={imageElement} image={image} key={image._id} />)}
            </Masonry>
        </div>
    );
};



// imports from our state and brings it into the component as a prop
const mapStateToProps = state => ({
    photos: state.photos
});

export default connect(mapStateToProps, { getAlbums, getImages })(Photos);

ImageItem.js

const ImageItem = ({image}, ref) => {

    return (
        <div ref={ref} className="grid-item my-1">
            <a href="" className='grid-link'>
                <img className='grid-img' src={image.fileLocation} alt=""/>          
            </a>
        </div>
    )
}

]

const forwardedImageElement = React.forwardRef(ImageItem)

export default forwardedImageElement;

标签： javascriptreactjscomponentsjsxreact-functional-component