时间戳

首页 > 解决方案 > React ref 在循环内重新渲染时中断

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

问题描述

我有一个包含一组组件的画廊组件。在每个子组件中，我都分配了一个参考。这样做的原因是因为在子组件中还有许多其他子组件，我试图访问大约 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 组件数组中的所有 refs 时，都是正确的。但是一旦 Gallery 组件由于任何原因重新呈现，GalleryItem 组件中的 refs 就会变为空值。

我在子组件中尝试了几件事，但我没有解决这个问题。我相信原因是因为上面的代码中发生了一些事情。

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

问题在循环中存储 ref 元素

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

标签： javascriptreactjs

解决方案

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

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

然后创建galleryItems就像

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

推荐阅读