当前位置：首页 > React

react如何获取节点内容

2026-01-24 12:05:16React

获取节点内容的常用方法

使用 ref 获取 DOM 节点 在 React 中，可以通过 useRef 或 createRef 创建 ref 对象，并将其附加到目标元素上。通过 ref 的 current 属性可以访问 DOM 节点，进而获取其内容。

import React, { useRef } from 'react';

function Example() {
  const divRef = useRef(null);

  const handleClick = () => {
    console.log(divRef.current.textContent); // 获取文本内容
    console.log(divRef.current.innerHTML);   // 获取 HTML 内容
  };

  return (
    <div ref={divRef} onClick={handleClick}>
      点击获取内容
    </div>
  );
}

通过事件对象获取 在事件处理函数中，可以通过 event.target 直接访问触发事件的 DOM 节点，适用于点击、输入等交互场景。

function handleClick(event) {
  console.log(event.target.textContent); // 直接获取事件触发节点的内容
}

使用 document 方法 在某些场景下，可以通过传统 DOM 方法如 document.getElementById 或 document.querySelector 获取节点内容。但这种方式在 React 中不推荐使用，可能与虚拟 DOM 产生冲突。

const node = document.getElementById('myElement');
console.log(node.textContent);

注意事项

函数组件与类组件的差异：函数组件使用 useRef，类组件使用 createRef 或回调 ref。
动态内容更新：ref 不会随内容自动更新，需结合状态（state）或副作用（useEffect）监听变化。
服务端渲染：避免在服务端渲染时直接访问 DOM，可能引发错误。

实际应用示例

获取输入框的值

const inputRef = useRef(null);

const showValue = () => {
  alert(inputRef.current.value); // 获取输入框当前值
};

return <input ref={inputRef} onChange={showValue} />;

获取子组件内容 通过 forwardRef 可将 ref 传递给子组件，访问其内部节点。

react如何获取节点内容

const Child = forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

function Parent() {
  const childRef = useRef(null);
  useEffect(() => {
    console.log(childRef.current.textContent);
  }, []);
  return <Child ref={childRef}>子组件内容</Child>;
}