React Hooks, как получить доступ к смонтированному parentNode с помощью ReactDom

Question

В настоящее время я выполняю миграцию моих компонентов реагирования на реагирующие хуки , но мне не хватает одного конкретного случая, который обращается к смонтированному элементу DOM .

Мой компонент использует React.class структура:

import { Component } from "react";
import ReactDOM from "react-dom";

class LineGraph extends Component {

    componentDidMount() {
        this.element = ReactDOM.findDOMNode(this).parentNode;
    }

    render() {
        return "";
    }
}

Теперь, используя перехватчики реагирования, ReactDOM.findDOMNode(this) выдает следующую ошибку:

Ошибка типа: response_dom__WEBPACK_IMPORTED_MODULE_1 ___ default.a.findDOMNode (...) равна нулю

Глядя на документацию ReactDOM # findDOMNode , я попытался использовать ссылки в возвращенном пустом элементе div, но после нескольких переменных элемента рисования становиться null.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

export default function LineGraph () {

    let myRef = React.createRef();

    useEffect(() => {
        element = ReactDOM.findDOMNode(myRef.current).parentNode;
    }, []);

    return (
      <div ref={myRef}></div>
    );
}

Я ищу чистый способ доступа к элементу DOM, в который вводится / монтируется мой код реакции.

Просто для контекста, мойцель состоит в том, чтобы внедрить svg-контент с помощью библиотеки d3, мой код хорошо работает с компонентами.

Answer 1

Есть некоторые незначительные проблемы с вашим кодом, вы можете заставить его работать и одновременно упростить его.

1. Удалите метод findDomNode

Это не требуется, поскольку вы уже обращаетесь к узлу через ссылку, поэтому вы можете использовать свойство .parentNode непосредственно на указанном узле DOM.

Обновление родительского узла при каждом повторном рендеринге

Удалив пустой массив из вашего метода useEffect, компонент будет обращаться к родительскому узлу каждый раз, когда родительский узел обновляется. Таким образом, у вас всегда есть доступ к недавно обновленному родительскому узлу.

https://stackblitz.com/edit/react-qyydtt

export default function LineGraph () {
    const parentRef = React.createRef();
    let parent;

    useEffect(() => {
     parent = parentRef.current.parentNode
    });

    return (
      <div ref={parentRef}></div>
    );
}

Answer 2

Проблема заключается в синхронизации доступа к ссылке.

Попробуйте использовать useRef ловушку с прослушивателем для изменения myRef и прочитайте ее, когдадопустимое значение:

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

export default function LineGraph() {
  const myRef = useRef();

  useEffect(() => {
    if (myRef.current) {
      console.log(myRef.current.parentNode)
    }
  }, [myRef])

  return <div ref={myRef}></div>;
}