React Hooks，如何使用 ReactDom 访问挂载的父节点

Question

我目前正在迁移我的 react 组件以响应 hooks，但遇到一个特定情况，即 访问已安装的 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(...) 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>
    );
}

我正在寻找一种干净的方式来访问 DOM 元素，其中我的反应代码是 injected/mounted。

仅供参考，我的目标是使用 d3 库注入 svg 内容，我的代码与组件配合得很好。

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

Answer 2

你的代码有一些小问题，你可以让它工作，同时简化它。

移除 findDomNode 方法

这不是必需的，因为您已经通过引用访问节点，因此您可以直接在引用的 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>
    );
}

React Hooks，如何使用 ReactDom 访问挂载的父节点

React Hooks, how to access mounted parentNode with ReactDom

reactjs

react-hooks

react-dom

react-component