React中无需直接编辑第三方组件HTML元素如何添加自定义属性

首先明确：CSS无法实现该需求，CSS仅能控制元素样式，不具备修改DOM节点属性的能力，你可以通过以下React兼容方案实现：

方案1：原生DOM操作（最通用，适配所有场景） #

你可以通过给外层容器绑定ref，在组件挂载后直接操作TablePresenter渲染出的原生DOM节点，给内部SVG添加自定义属性，无需引入任何第三方依赖，实现代码如下：

import { useRef, useEffect } from 'react';

const MyComponent = () => {
  // 绑定外层容器ref
  const tableContainerRef = useRef(null);

  useEffect(() => {
    if (!tableContainerRef.current) return;
    // 匹配组件内部所有SVG节点
    const sortSvgList = tableContainerRef.current.querySelectorAll('svg');
    sortSvgList.forEach((svgEl, idx) => {
      // 按需求设置自定义属性，这里按列顺序给data-id赋值1、2...
      svgEl.setAttribute('data-id', idx + 1);
    });
  }, []);

  return(
    {/* 给TablePresenter套一层用于捕获DOM的容器 */}
    <div ref={tableContainerRef}>
      <TablePresenter />
    </div>
  ) 
}

export default MyComponent;

方案说明 #

• 该方案不需要修改TablePresenter的任何源码，也不需要依赖jQuery，完全基于浏览器原生API和React标准能力实现
• 如果TablePresenter会动态更新列、重新渲染内部结构，可以在useEffect的依赖数组中添加对应的触发更新的变量，保证属性更新及时

方案2：自定义列头（仅适用于TablePresenter支持自定义列配置的场景） #

如果你用的TablePresenter组件支持传入列配置、自定义列头渲染，你可以直接在自定义的列头模板中给SVG添加data-id属性，不需要操作DOM，这种方式更符合React的声明式写法。

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