React(Next.js) ARIA属性警告排查：用aria-hidden却提示ariaHidden错误

编写的组件代码如下：

<HiChevronDown
  aria-hidden="true"
  className= "ml-2 h-5 w-5 ..."
/>

控制台却警告提示使用了驼峰式的ariaHidden属性，询问错误原因。

原因与解决方法 #

• 问题根源：JSX语法规范中，ARIA属性应当使用驼峰命名法（如ariaHidden），而非HTML原生的短横线形式（aria-hidden）。虽然React会尝试兼容短横线形式的属性，但部分代码检测工具（如ESLint的jsx-a11y插件）或组件内部的属性处理逻辑，会将aria-hidden识别/转换为驼峰式的ariaHidden，而DOM原生并不支持驼峰式的ARIA属性，因此触发警告。
• 解决方法：直接将代码中的aria-hidden替换为驼峰式的ariaHidden即可，修改后的代码如下：

<HiChevronDown
  ariaHidden="true"
  className= "ml-2 h-5 w-5 ..."
/>

React会自动将ariaHidden转换为DOM上合法的aria-hidden属性，同时消除控制台警告。

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