如何为ReactDataGrid组件添加id或data-testid属性？

我们使用的是ReactDataGrid，需要为网格添加id或data-testid属性用于测试，但文档里没找到相关方法，尝试了直接传递属性的写法都无效：

<ReactDataGrid
  treeColumn="description"
  licenseKey="..."
  style={gridStyle}
  columns={columns}
  data-id="workPlease"
/>

<ReactDataGrid
  treeColumn="description"
  licenseKey="..."
  style={gridStyle}
  columns={columns}
  data-testid="workPlease"
/>

<ReactDataGrid
  treeColumn="description"
  licenseKey="..."
  style={gridStyle}
  columns={columns}
  id="workPlease"
/>

可以试试这两种解决方案：

• 方案一：用容器元素包裹
  给外层的div添加测试属性，测试时通过容器定位网格，这种方法最简单：

  <div data-testid="workPlease">
    <ReactDataGrid
      treeColumn="description"
      licenseKey="..."
      style={gridStyle}
      columns={columns}
    />
  </div>
  

• 方案二：通过Ref手动设置属性
  如果必须给网格自身的DOM元素添加属性，可以用ref获取网格的DOM节点，然后手动设置：

  import { useRef, useEffect } from 'react';
  
  function MyGridComponent() {
    const gridRef = useRef(null);
  
    useEffect(() => {
      if (gridRef.current) {
        // 替换成ReactDataGrid实际渲染的根元素选择器，比如.rdg-grid
        const gridRoot = gridRef.current.querySelector('.rdg-grid');
        if (gridRoot) {
          gridRoot.setAttribute('data-testid', 'workPlease');
          gridRoot.setAttribute('id', 'workPlease');
        }
      }
    }, []);
  
    return (
      <ReactDataGrid
        ref={gridRef}
        treeColumn="description"
        licenseKey="..."
        style={gridStyle}
        columns={columns}
      />
    );
  }
  

  注意需要先检查ReactDataGrid渲染后的DOM结构，找到正确的根元素选择器。

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