отреагировать ребенок ref обновить родителя - PullRequest
Новая
       6

отреагировать ребенок ref обновить родителя

0 голосов
/ 29 июня 2019

Я хочу передать массив ссылок в массив детей соответственно.Я хочу, чтобы родительский компонент повторно отобразил, как только ссылки будут установлены, потому что на стиль элемента контейнера массива дочерних элементов влияют также размеры дочерних элементов, а также имеется условный рендеринг элемента вдоль массивадочерние элементы, которые отображаются только при наличии ref-набора.Пример: 

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 отображаются, если установлен дочерний элемент ref.Моя проблема в том, что после установки ссылок больше никаких рендеров не происходит.Как сделать так, чтобы родительский компонент повторно отображался без сортировки по уродливым методам, таким как 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);
                            }
                        )}

Проблема теперь в том, что это вызывает переполнение стека из-за бесконечного обновления.Что я могу сделать для обновления родительского компонента без переполнения стека?

...