React Hooks，如何使用ReactDom访问已安装的parentNode

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)引发以下错误：

TypeError：react_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元素。

仅出于上下文考虑，我的目标是使用d3库注入svg内容，我的代码与组件配合良好。

Answer 1

访问参考的问题是时间]。

尝试将useRef钩子与侦听器一起使用以侦听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>;
}

Answer 2

您的代码存在一些小问题，您可以使其工作并同时进行简化。