Question

我希望分别将ref数组传递给子级数组。我希望一旦设置了refs，就重新渲染父组件，因为child数组的容器元素的样式会受到child的尺寸的影响，以及在array的旁边有条件地渲染元素仅当设置了参考集时才渲染的子级。一个例子：

const getMarkersStyle = () => {
        if (markersRef.length && markersRef[0].current) {
            return {
                transform: `translate(-${markersRef[0].current.width.baseVal.value / 2}px, -${markersRef[0].current.height.baseVal.value}px)`
            };
        }
    };

    const renderMarkers = () => {
        if (mapContainerRef.current && mapRef.current && marker && coordinates.length) {
            const mapGeoViewBox = mapRef.current.getAttribute("mapsvggeoviewbox").split(' ');
            return <g className="markers" style={getMarkersStyle()}>
                {coordinates.map((coordinate, i) => {
                    return <svg>
                        {markersRef.length && markersRef[i].current && <Tooltip triggerRef={markersRef[i]}>
                            <rect x={2} y={2} width={10} height={5} rx={.5} ry={.5} fill='black'/>
                            <text x={5} y={5} fontSize={2} fill='white'>Yay!</text>
                        </Tooltip>}
                        {marker.render(
                            transform(coordinate.lat, coordinate.lng, mapRef.current.width.baseVal.value, mapRef.current.height.baseVal.value, mapGeoViewBox[0], mapGeoViewBox[2], mapGeoViewBox[3]),
                            markersRef[i]
                        )}
                    </svg>;
                })}
            </g>;
        }
        return null;
    };

如您所见，getMarkersStyle是根据子元素的尺寸计算得出的，如果设置了子引用，则会渲染Tooltip元素。我的问题是在设置参照后，不再出现渲染。我该如何重新渲染父级组件，而无需对诸如forceUpdate这样的丑陋方法进行排序，又不将函数prop传递给在父级中创建虚拟setState的子级？

EDIT1：

所以我使用状态数组来跟踪我的引用：

const [markersRef, setMarkersRef] = useState(coordinates.map(() => React.createRef()));

并使用ref回调进行设置：

{marker.render({
                                ...transform(coordinate.lat, coordinate.lng, mapRef.current.width.baseVal.value, mapRef.current.height.baseVal.value, mapGeoViewBox[0], mapGeoViewBox[2], mapGeoViewBox[3])
                            },
                            element => {
                                let newMarkersRef = [...markersRef];
                                newMarkersRef[i] = element;
                                setMarkersRef(newMarkersRef);
                            }
                        )}

现在的问题是，它会导致无限更新导致堆栈溢出。我该怎么办才能实现父组件更新而不会出现堆栈溢出？

反应孩子ref更新父母

0 个答案: