react-bootstrap使用OverlayTrigger和Popover组件报错排查

参考react-bootstrap官方提供的Popover示例修改使用时遇到功能异常：按钮可正常渲染，但点击按钮尝试展示弹出层时，控制台抛出如下错误：

Element type is invalid: expected a string [...] or a class/function [...] but got: undefined. You likely forgot to export your component [...]

import {Button, OverlayTrigger, Popover} from "react-bootstrap";
// ...
renderColumnOptionsButton() {
  return (
    <OverlayTrigger
      trigger="click"
      placement="left"
      overlay={
        <Popover>
          <Popover.Header as="h3">
            Choose which columns to display:
          </Popover.Header>
          <Popover.Body>
            options will go here
          </Popover.Body>
        </Popover>
      }
    >
      <Button variant="secondary">Column Options</Button>
    </OverlayTrigger>
  );
}
// ...
render() {
  // ...
    {this.props.allowColumnSelection &&
      {this.renderColumnOptionsButton()}
    }
  // ...
}

• 初步校验：将overlay属性传入的Popover元素替换为<text>hello</text>，覆盖层可正常运行，确认问题由传入OverlayTrigger的Popover元素导致。
• 第一次尝试修复：给Popover添加必填的id属性，WebStorm提示Type JSX.element is not assignable to type PropTypes.Requireable[...]类型错误，问题未解决。
• 第二次尝试修复：分别将Popover定义为JSX常量、返回JSX的函数形式传入overlay属性，仍提示Type function is not assignable to type PropTypes.Requireable[...]类型错误，功能无法正常运行。

问题根因：当前项目使用的是react-bootstrap v4版本，该版本Popover的合法子组件为<Popover.Title>和<Popover.Content>，而参考的官方示例为v5+高版本写法，高版本才支持<Popover.Header>和<Popover.Body>子组件，因此会解析到不存在的组件属性返回undefined，触发上述报错。
修复方式：将Popover下的子组件替换为v4版本对应组件即可，修复后的核心代码如下：

<OverlayTrigger
  trigger="click"
  placement="left"
  overlay={
    <Popover>
      <Popover.Title as="h3">
        Choose which columns to display:
      </Popover.Title>
      <Popover.Content>
        options will go here
      </Popover.Content>
    </Popover>
  }
>
  <Button variant="secondary">Column Options</Button>
</OverlayTrigger>

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