Question

我有一个Gallery组件，其中包含一组组件。在每个子组件中，我都分配了一个引用。这样做的原因是因为在子组件中还有许多其他子组件，而我正在尝试访问深度约5个组件的组件上的某些功能。以下代码显示了初始设置：

export class Gallery extends React.Component {
    render() {
        const galleryItems = data.map((item, index) => {
            return (
                <GalleryItem
                    ref={React.createRef()}
                />
            );
        });

        return (
            <div >
                <Gallery
                    items={heroGalleryItems}
                />
            </div>
        );
    }
}

当Gallery组件呈现GalleryItem组件数组中的所有引用时，它们都是正确的。但是，无论出于任何原因，只要Gallery组件重新呈现，GalleryItem组件中的引用都将变为空值。

我在子组件中尝试了几种方法，但是我什么也没解决。我相信原因是因为上面的代码中发生了某些事情。

在阅读以下内容后，我还尝试过更改代码：

Issue storing ref elements in loop

但是，当我查看自己的实现时，我并不清楚该人在说什么。

Answer 1

您需要从循环（以及渲染）中移出React.createRef(），因为它会在每个渲染上创建一个新的引用。

根据您的代码/用法，您需要在构造函数和CWRP方法中执行此操作（基本上在数据更改时）。

然后创建galleryItems就像

...
<GalleryItem ref={item.ref} />
...

循环内的React ref在重新渲染时中断

1 个答案: