React Hooks，如何使用 ReactDom 访问挂载的 parentNode答案

【问题标题】：React Hooks, how to access mounted parentNode with ReactDomReact Hooks，如何使用 ReactDom 访问挂载的 parentNode
【发布时间】：2020-02-03 08:19:02
【问题描述】：

我目前正在将我的 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 "";
    }
}

现在使用 react hooks，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 内容，我的代码可以很好地与组件配合使用。

【问题讨论】：

标签： reactjs react-hooks react-dom react-component

【解决方案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>;
}

【讨论】：

这不是实际问题。实际的问题在于空的依赖数组。
他的代码有很多问题，有些变量甚至没有定义
我没有看到任何未定义的变量。
另外，问题不是空的dep数组，你应该自己检查一下，问题是引用的误用

【解决方案2】：

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

删除 findDomNode 方法

这不是必需的，因为您已经通过 ref 访问节点，因此您可以直接在引用的 DOM 节点上使用 .parentNode 属性。

每次重新渲染时更新父节点

通过从您的 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>
    );
}

【讨论】：