响应钩子，如何用ReactDom访问已安装的ReactDom
响应钩子，如何用ReactDom访问已安装的ReactDom
提问于 2019-10-05 06:01:59
我目前正在迁移我的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钩子，ReactDOM.findDOMNode(this)抛出以下错误：
react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(...)：TypeError为空
查看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元素的干净方法，在DOM元素中注入/挂载了我的反应代码.
仅就上下文而言，我的目标是使用d3库注入svg内容，我的代码可以很好地处理组件。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-05 06:55:10
问题是访问引用的时间。
尝试将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>;
}
Stack Overflow用户
发布于 2019-10-05 12:20:23
您的代码中有一些小问题，您可以同时使它工作并简化它。
- 删除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>
);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58245791
复制相关文章
相似问题
腾讯云开发者
