使用useEffect无法更新DOM元素的role属性，该如何解决？

尝试为一个元素设置role属性，通过console.log查看似乎该属性已更改，但检查DOM时发现table的role并未更新，找不到原因。请问哪里出错了，该如何正确更新DOM中的role属性？

以下是代码：

import React, { useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import products from './products.json';

const App = () => {
  useEffect(() => {
    let table = document.getElementsByClassName('grid')[0];
    table.setAttribute('role', 'table');
    console.log(table);
  }, []);
  return (
    <Grid
      style={{
        height: '400px',
      }}
      data={products}
      className="grid"
    >
      <GridColumn field="ProductID" title="ID" width="40px" />
      <GridColumn field="ProductName" title="Name" width="250px" />
      <GridColumn field="Category.CategoryName" title="CategoryName" />
      <GridColumn field="UnitPrice" title="Price" />
      <GridColumn field="UnitsInStock" title="In stock" />
    </Grid>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

原因 #

1. DOM操作被React渲染覆盖：你用原生DOM API修改属性的方式和React的渲染机制冲突了。useEffect空依赖数组只在组件首次渲染后执行一次，此时你手动给元素设置了role="table"，但Kendo Grid组件可能在后续渲染周期（比如数据加载完成、内部状态更新）中重新渲染表格元素，直接覆盖了你手动设置的属性。
2. 目标元素错误：document.getElementsByClassName('grid')[0]获取的是Grid组件的外层容器，而非实际的<table>元素，你修改的是容器的role，不是表格本身的。

正确解决方法 #

不要直接操作原生DOM，而是利用Kendo React Grid提供的API或React属性传递来设置role：

方法1：通过Grid组件的tableProps属性传递role

这是最符合React和组件库规范的方式，Kendo React Grid允许通过tableProps给内部的<table>元素直接传递属性：

const App = () => {
  return (
    <Grid
      style={{ height: '400px' }}
      data={products}
      className="grid"
      tableProps={{ role: 'table' }} // 直接为内部table元素设置role
    >
      <GridColumn field="ProductID" title="ID" width="40px" />
      <GridColumn field="ProductName" title="Name" width="250px" />
      <GridColumn field="Category.CategoryName" title="CategoryName" />
      <GridColumn field="UnitPrice" title="Price" />
      <GridColumn field="UnitsInStock" title="In stock" />
    </Grid>
  );
};

方法2：动态修改的场景（结合状态管理）

如果需要根据条件动态修改role，可以用React状态来控制，确保属性始终和虚拟DOM同步：

import React, { useState } from 'react';

const App = () => {
  const [tableRole, setTableRole] = useState('table');

  // 示例：点击按钮触发role修改
  const toggleRole = () => {
    setTableRole(prev => prev === 'table' ? 'grid' : 'table');
  };

  return (
    <>
      <button onClick={toggleRole}>切换表格Role</button>
      <Grid
        style={{ height: '400px' }}
        data={products}
        className="grid"
        tableProps={{ role: tableRole }}
      >
        <GridColumn field="ProductID" title="ID" width="40px" />
        <GridColumn field="ProductName" title="Name" width="250px" />
        <GridColumn field="Category.CategoryName" title="CategoryName" />
        <GridColumn field="UnitPrice" title="Price" />
        <GridColumn field="UnitsInStock" title="In stock" />
      </Grid>
    </>
  );
};

关于console.log看似生效的解释 #

你修改DOM后立刻打印了元素，此时React还没进入下一次渲染周期，所以控制台能看到修改后的属性。但当组件后续重新渲染时，React会根据虚拟DOM的状态更新真实DOM，把你手动设置的role覆盖掉，因此在开发者工具的DOM面板中看不到修改后的结果。

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