react-bootstrap popover 问题

Question

我正在尝试创建弹出窗口，但 react-bootstrap 文档提供的弹出窗口示例无法正常工作。我试图进行各种调整来解决但被卡住了。

import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"

class PopoverExample extends React.Component {
  render() {
    return (
      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="right" overlay={popover}>
          <Button variant="success">Click me to see</Button>
        </OverlayTrigger>
      );
    )
  }
}

**The error message I receive is:**

 Line 9:  Parsing error: Unexpected token

   7 |   render() {
   8 |     return (
>  9 |       const popover = () => (
     |       ^

Answer 1

实际上你混合了 class 组件和功能组件，

你的完整组件应该是这样的，

import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"


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="right" overlay={popover}>
    <Button variant="success">Click me to see</Button>
  </OverlayTrigger>
);

export default Example

Example 是您的实际组件，现在您可以导出它，并在任何您想要的地方使用。

react-bootstrap popover 问题

Issue with react-bootstrap popover

popover

reactjs

react-bootstrap