React Popover无法运行：Cannot read properties of undefined (reading 'className')

你的代码存在两个核心问题：

1. Overlay 组件返回值错误 #

你定义的 Overlay 组件内部声明了返回Popover的函数 popover，但最终直接返回了这个函数本身，而非调用它得到的React元素，导致OverlayTrigger无法渲染正确内容。

2. OverlayTrigger 中 overlay 属性调用方式错误 #

如果 Overlay 是类组件的方法，() => this.Overlay() 的写法冗余且可能引发上下文问题；如果是函数组件，this 本身不存在，直接使用会触发报错。

修正后的代码示例 #

方案一：简化 Overlay 组件，直接返回Popover元素

// 定义Popover内容组件
const Overlay = () => (
    <Popover id="popover-basic">
        <Popover.Title as="h3">Popover right</Popover.Title>
        <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging. right?
        </Popover.Content>
    </Popover>
);

方案二：正确调用 overlay 属性

无论是类组件还是函数组件，直接传入组件实例即可：

<OverlayTrigger 
    trigger="click" 
    placement="right" 
    overlay={<Overlay />}
>
    <Button variant="success">see</Button>
</OverlayTrigger>

若需动态生成内容，也可以让 overlay 接收返回元素的函数：

<OverlayTrigger 
    trigger="click" 
    placement="right" 
    overlay={() => <Overlay />}
>
    <Button variant="success">see</Button>
</OverlayTrigger>

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