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

Question

我目前正在将我的react 组件迁移到 react 挂钩，但在访问已安装的 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)抛出以下错误：

类型错误：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 内容，我的代码可以很好地与组件配合使用。

标签： reactjsreact-hooksreact-domreact-component

Answer 1

问题是访问参考的时间。

尝试使用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)
    }
  }, [])

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