React元素中能否使用HTML popover属性及popover API？

原生Popover API完全可以在React中使用，只是JSX里的属性命名需要遵循React的camelCase规范，这也是你可能觉得“无法直接使用”的原因。

基础JSX实现 #

对应你给出的HTML代码，转换成JSX只需要把popovertarget改成popoverTarget（kebab-case转camelCase），popover属性可以直接保留：

<button popoverTarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

这段代码和原生HTML的功能完全一致，点击按钮就能触发popover的显示/隐藏。

手动控制的实现（可选） #

如果需要更灵活的控制（比如通过逻辑触发、监听popover事件），可以结合React的useRef和原生API的方法：

import { useRef } from 'react';

function PopoverDemo() {
  const popoverRef = useRef(null);

  const handleToggle = () => {
    popoverRef.current?.togglePopover();
  };

  return (
    <>
      <button onClick={handleToggle}>Toggle Popover</button>
      <div 
        ref={popoverRef} 
        popover 
        id="my-popover"
        onToggle={(e) => console.log('Popover状态:', e.newState)}
      >
        Greetings, one and all!
      </div>
    </>
  );
}

这里通过togglePopover()方法手动控制popover，还可以监听onToggle事件获取状态变化。

以上都是纯JSX/React的实现方式，不需要依赖第三方库。

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