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

Question

我有一个包含一系列组件的图库组件。在每个子组件中，我分配一个引用。这样做的原因是因为在子组件中还有许多其他子组件，并且我试图访问大约 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} />
...