React React-Bootstrap popover

Question

试图模仿React-Bootstrap的弹出框示例。我对反应相当陌生，无法理解为什么我在这里收到一个似乎相当广泛的错误，我似乎无法确定它。我的反应公司代码：

import React, { Component } from 'react';
import { Popover, OverlayTrigger, Button } from 'react-bootstrap';
import '../styles/headerPortfolio.css';
class HeaderPortfolio extends Component {
  render() {
    const popover = (
      <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>
    );
    const Example = () => (
      <OverlayTrigger trigger="click" placement="bottom" overlay={{popover}}>
        <Button variant="success">Click me to see</Button>
      </OverlayTrigger>
    );
    return (
      <Example />
    )
  }
}
export default HeaderPortfolio;

以及控制台错误 im 收到：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

代码沙盒 ： 代码沙盒

Answer 1

弹出框组件中有错误，请将其更正为函数组件：

const popover = () => (
      <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>
    );