eslint-plugin-react 中处理 Popover API 属性的未知属性错误

在 React 项目中，当开发者尝试使用最新的 Popover API 时，可能会遇到 eslint-plugin-react 插件报出的"Unknown property"错误。这个问题源于插件尚未及时更新以支持这些新属性。

Popover API 是浏览器原生提供的一种新型交互方式，允许开发者创建弹出式内容而无需依赖 JavaScript 库或复杂的 CSS。React 团队已经在核心库中添加了对这些属性的支持，但相关 ESLint 规则需要同步更新。

主要涉及的属性包括：

• popover：定义元素是否为弹出层及其行为模式
• popoverTarget：指定触发弹出层的目标元素
• popoverTargetAction：控制弹出层的显示或隐藏动作
• onBeforeToggle 和 onToggle：弹出层状态变化时的回调事件

目前，开发者可以通过两种方式临时解决这个问题：

1. 在项目 ESLint 配置中手动添加例外规则：

'react/no-unknown-property': [
    'error',
    { 
        ignore: [
            'onBeforeToggle', 
            'onToggle', 
            'popover', 
            'popoverTarget', 
            'popoverTargetAction'
        ] 
    },
]

2. 使用 TypeScript 时，可以添加 @ts-expect-error 注释暂时忽略类型检查：

<div
    popover="auto" // @ts-expect-error
>
    {/* 内容 */}
</div>

随着 Web 标准的不断演进，前端工具链需要及时跟进支持新特性。eslint-plugin-react 作为 React 生态中的重要工具，其维护团队通常会快速响应这类需求。开发者可以关注项目更新，在后续版本中这些属性将会被原生支持，不再需要额外配置。

对于正在评估是否使用 Popover API 的团队，建议权衡其浏览器兼容性与开发便利性。虽然现代浏览器已广泛支持该 API，但在生产环境中使用时仍需考虑渐进增强策略。