reactjs - React Hooks，如何使用 ReactDom 访问挂载的 parentNode

Question

我目前正在迁移我的 react 组件 react 钩子(Hook) ，但要处理一个具体案例，即 访问挂载的 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 "";
    }
}

现在使用 react 钩子(Hook)， ReactDOM.findDOMNode(this)抛出以下错误:

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(...) is null

看 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>
    );
}

我正在寻找一种干净的方式来访问注入(inject)/安装我的 react 代码的 DOM 元素。

就上下文而言，我的目标是使用 d3 库注入(inject) svg 内容，我的代码可以很好地与组件配合使用。

Answer 1

问题是时间访问引用。
尝试使用 useRef 与 myRef 的监听器 Hook 更改，并在它具有有效值时读取它:

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)
    }
  }, [])

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