eslint-plugin-react 对 React 19 新增事件属性的支持问题解析

随着 React 19 的正式发布，框架引入了一系列新特性，其中包括对 HTML Popover API 的全面支持。然而，部分开发者在使用这些新特性时遇到了 eslint-plugin-react 的规则校验问题，特别是关于 onBeforeToggle 事件处理函数和 camelCase 风格的 popover 相关属性。

问题背景

React 19 新增了对 HTML Popover API 的原生支持，这意味着开发者现在可以直接在 React 组件中使用标准的 popover 相关属性和事件。这些新增特性包括：

1. onBeforeToggle 事件处理函数
2. camelCase 风格的 popoverTarget 和 popoverTargetAction 属性

然而，当前版本的 eslint-plugin-react (v7.37.2) 尚未更新对这些新特性的识别规则，导致在使用这些属性时会出现"未知属性"的警告。

具体问题表现

当开发者在代码中使用这些新特性时，例如：

<button popoverTarget="foo" popoverTargetAction="show">
    Open Popover
</button>
<div
    id="foo"
    onBeforeToggle={event => console.log(event)}
    popover="auto"
>
    <h1>Popover Content</h1>
</div>

eslint-plugin-react 会产生以下错误提示：

1. 将 onBeforeToggle 标记为未知属性
2. 建议将 popoverTarget 改为全小写的 popovertarget
3. 建议将 popoverTargetAction 改为全小写的 popovertargetaction

技术解析

onBeforeToggle 事件

onBeforeToggle 是 React 19 新增的一个合成事件，对应于原生的 beforetoggle 事件。这个事件在 popover 元素的状态即将改变（显示或隐藏）之前触发，允许开发者在状态变更前执行一些逻辑或阻止变更。

Popover 相关属性

React 19 支持了两种风格的 popover 相关属性：

1. 小写风格（与 HTML 原生属性一致）：

   • popovertarget
   • popovertargetaction

2. camelCase 风格（符合 React 属性命名惯例）：

   • popoverTarget
   • popoverTargetAction

虽然 HTML 规范使用的是全小写属性名，但 React 的传统是将 HTML 属性转换为 camelCase 形式（如 className 对应 class），因此这两种形式在 React 19 中都被支持。

临时解决方案

在等待 eslint-plugin-react 官方更新支持这些新特性前，开发者可以采用以下临时解决方案：

1. 使用 ESLint 的禁用注释忽略特定行的警告：

{/* eslint-disable-next-line react/no-unknown-property */}
<button popoverTarget="foo" popoverTargetAction="show">
    Open Popover
</button>

2. 在 ESLint 配置中添加例外规则：

// .eslintrc.js
module.exports = {
  rules: {
    'react/no-unknown-property': ['error', {
      ignore: ['onBeforeToggle', 'popoverTarget', 'popoverTargetAction']
    }]
  }
}

3. 暂时使用小写属性名：

<button popovertarget="foo" popovertargetaction="show">
    Open Popover
</button>

最佳实践建议

虽然可以暂时使用上述解决方案，但从长期代码可维护性考虑，建议：

1. 保持代码风格一致性 - 如果项目中使用的是 camelCase 风格的 React 属性，则应该等待插件更新后继续使用这种风格
2. 关注 eslint-plugin-react 的更新，及时升级到支持 React 19 新特性的版本
3. 对于新项目，可以考虑直接使用 React 19 推荐的最新语法

总结

React 19 的新特性为开发者带来了更强大的功能，但配套工具链的更新有时会稍有滞后。理解这些兼容性问题的本质有助于开发者做出合理的临时解决方案选择，同时保持对新版本特性的关注，确保在工具链更新后能够及时采用官方推荐的写法。对于 popover 相关功能，React 团队显然更倾向于推广 camelCase 风格的属性名，这与 React 一贯的属性命名风格保持一致。