当前位置: 首页 > 文档资料 > Rax 中文文档 >

findDOMNode

优质
小牛编辑
124浏览
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>;
}

参考

Hooks