如何用React方式给指定role属性的Div添加自定义CSS类

方法1：使用useRef + useEffect（函数组件） #

这是最常用的方案，通过ref获取外层容器，再定位到目标元素添加类：

import { useRef, useEffect } from 'react';

function YourParentComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // 精准定位目标div
      const presentationDiv = containerRef.current.querySelector('div[role="presentation"]');
      if (presentationDiv) {
        presentationDiv.classList.add('myCustomClass');
      }
    }
  }, []); // 空依赖确保只在组件挂载后执行一次

  return (
    <div ref={containerRef} className="css-1dozdou">
      {/* 此处是你无法直接修改的组件内容 */}
    </div>
  );
}

如果目标组件会因状态变化重新渲染（导致内部DOM重建），可将相关状态加入useEffect的依赖数组，确保每次更新后都能重新添加类。

方法2：使用ref回调（更灵活） #

直接在父容器的ref回调里处理，省去额外的useEffect：

function YourParentComponent() {
  const handleContainerRef = (element) => {
    if (element) {
      const presentationDiv = element.querySelector('div[role="presentation"]');
      if (presentationDiv) {
        presentationDiv.classList.add('myCustomClass');
      }
    }
  };

  return (
    <div ref={handleContainerRef} className="css-1dozdou">
      {/* 目标组件内容 */}
    </div>
  );
}

方法3：类组件方案 #

如果你的项目使用类组件，用createRef结合生命周期方法实现：

import React from 'react';

class YourParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    this.addCustomClass();
  }

  componentDidUpdate() {
    // 若组件更新后DOM会重建，需再次执行添加类操作
    this.addCustomClass();
  }

  addCustomClass() {
    if (this.containerRef.current) {
      const presentationDiv = this.containerRef.current.querySelector('div[role="presentation"]');
      if (presentationDiv) {
        presentationDiv.classList.add('myCustomClass');
      }
    }
  }

  render() {
    return (
      <div ref={this.containerRef} className="css-1dozdou">
        {/* 目标组件内容 */}
      </div>
    );
  }
}

注意事项 #

• 以上方案仅会修改当前组件实例内的目标div，不会影响其他同类型组件，完全匹配你的需求。
• 若页面存在多个带role="presentation"的div，可结合外层css类优化选择器（比如.css-1dozdou > div[role="presentation"]），避免误选。

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