React不识别popoverTarget属性求助：语言下拉框开发问题

出现这个警告的核心原因是当前项目使用的React类型定义（TypeScript环境）或React DOM版本尚未完全支持HTML Popup API的相关属性，导致popoverTarget被判定为未知属性。以下是几种可行的解决方式：

1. 更新React类型定义包 #

如果你的项目基于TypeScript，优先尝试更新@types/react和@types/react-dom到最新版本——新版本已经同步支持Popup API的属性：

npm install @types/react@latest @types/react-dom@latest
# 或使用yarn
yarn add @types/react@latest @types/react-dom@latest

2. 手动通过Ref设置DOM属性 #

如果不想更新依赖，可以通过React的useRef钩子直接给DOM元素设置原生属性，绕过React的属性校验逻辑：

import { useRef, useEffect } from 'react';
import Image from 'next/image';
import cn from 'classnames';

interface IProps {
  handleClick: () => void;
  text: TLanguageText;
  className?: string;
  image: StaticImport | string;
}

const LanguageDropdownItem = ({
  handleClick,
  text,
  className,
  image,
}: IProps) => {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (buttonRef.current) {
      // 设置原生的popovertarget属性（全小写格式）
      buttonRef.current.setAttribute('popovertarget', 'language');
    }
  }, []);

  return (
    <button
      ref={buttonRef}
      onClick={handleClick}
      className={cn(
        " flex justify-between overflow-hidden border-2 border-[#B0B0B0]  w-full bg-[#F6F6F6] py-[17.5px] px-[14px]",
        className
      )}
    >
      <p>{text}</p>
      <Image src={image} alt="" className="size-6 rounded-md" />
    </button>
  );
};

export default LanguageDropdownItem;

3. 扩展HTML元素类型定义（TypeScript专属） #

如果更新依赖后仍存在类型报错，可以手动扩展HTMLButtonElement的类型，添加Popup API相关属性：
在项目的types目录下创建react.d.ts文件，内容如下：

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    popoverTarget?: string;
    popoverTargetAction?: 'hide' | 'show' | 'toggle';
  }
}

declare module 'react-dom/client' {
  interface DOMAttributes<T> {
    popoverTarget?: string;
    popoverTargetAction?: 'hide' | 'show' | 'toggle';
  }
}

添加后TypeScript会将popoverTarget识别为合法的HTML属性。

另外你提到此前独立组件使用该特性正常，大概率是因为那个组件所在项目的React依赖版本更新，已经支持了Popup API的相关属性。

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