如何为Fluent UI主按钮添加非data-前缀的自定义属性？

直接添加非data-*前缀的自定义属性会被React过滤，导致无法生效，下面提供两种可行的解决方法：

方法1：使用组件内置的rootProps属性 #

大部分Fluent UI按钮组件支持通过rootProps传递额外属性到根可点击元素，这是官方推荐的标准方式：

<PrimaryButton
  text={props.btnText}
  href={props.link}
  target="_blank"
  rootProps={{ 'digitaldata-collections': 'Export' }}
/>

方法2：通过Ref手动设置属性 #

如果组件不支持rootProps，可以利用React的useRef和useEffect钩子，在组件挂载后手动给DOM元素添加属性：

import { useRef, useEffect } from 'react';
import { PrimaryButton } from '@fluentui/react'; // 根据你的Fluent UI版本调整导入路径

function CustomExportButton(props) {
  const buttonRef = useRef(null);

  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.setAttribute('digitaldata-collections', 'Export');
    }
  }, []);

  return (
    <PrimaryButton
      ref={buttonRef}
      text={props.btnText}
      href={props.link}
      target="_blank"
    />
  );
}

原理说明 #

React会自动过滤DOM元素上的非标准HTML属性，只有data-*、aria-*这类符合W3C规范的属性会被保留。如果Fluent UI组件没有显式处理自定义属性的传递逻辑，直接添加的非标准属性就会被忽略。优先使用rootProps方案，比手动操作Ref更符合组件设计规范，也更稳定。

内容的提问来源于stack exchange，提问作者miri W.