findDOMNode
优质
小牛编辑
131浏览
2023-12-01
大多数情况下,我们并不需要直接操作真实的 DOM,Rax 的虚拟 DOM 足以满足创建界面的需要。而在极少数情况下,我们又不得不去操作底的 DOM。为了和容器交互,我们需要获取对 DOM 节点的引用。Rax 提供了一个访问受自身控制的 DOM 节点方法 findDOMNode
。
当组件已经被挂载到 DOM 上时,findDOMNode
可用于获取真正的 DOM 元素,以便对 DOM 节点进行操作。此方法对于从 DOM 中读取值很有用。大多数情况下,你可以绑定一个 ref 到 DOM 节点上,可以完全避免使用 findDOMNode
。因为 findDOMNode
是一个访问底层 DOM 节点的应急方案,会破坏组件的抽象结构且对性能产生很大影响。
方法
findDOMNode(component)
参数
component
参数可以是 Rax 元素或者 DOM,均可返回真实 DOM 节点。
示例
import {createElement, render, useRef, useEffect } from 'rax';
import findDOMNode from 'rax-find-dom-node';
import View from 'rax-view';
function App() {
const ref = useRef(null);
useEffect(() => {
const dom = findDOMNode(ref.current);
});
return <View ref={ref} ></View>;
}