如何在React中获取DOM元素对应的HTML字符串形式内容

你通过useRef拿到的ref.current本身就是原生DOM对象，和document.querySelector返回的DOM对象完全一致，打印模板字符串时输出[object HTMLXXXElement]是因为JS自动调用了DOM对象的默认toString()方法，不是无法获取HTML内容。

要得到对应的HTML字符串，直接调用DOM对象的两个原生属性即可：

• 如需获取包含元素自身标签、属性、所有子节点的完整HTML内容，使用outerHTML属性
• 如需仅获取元素内部的子节点HTML内容，不包含元素自身标签，使用innerHTML属性

注意事项 #

调用属性前需确保ref.current已经完成赋值：只有组件挂载完成、对应DOM元素已经渲染到页面后，ref.current才会指向对应的DOM节点，不能直接在组件顶层同步调用取值，推荐在useEffect回调、用户事件处理函数等DOM已渲染的时机执行取值逻辑。

示例代码 #

import React, { useRef, useEffect } from 'react';

function TableDemo() {
  // 初始化ref
  const tableRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后ref.current有值，先做空判断避免报错
    if (tableRef.current) {
      // 打印完整HTML字符串，包含<table>标签本身
      console.log('完整HTML：', tableRef.current.outerHTML);
      // 打印<table>内部的所有子元素HTML
      console.log('内部HTML：', tableRef.current.innerHTML);
    }
  }, []);

  // 将ref绑定到对应的DOM元素上
  return (
    <table ref={tableRef} className="data-table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
        </tr>
      </tbody>
    </table>
  );
}

内容的提问来源于stack exchange，提问作者Ali Husham