Question

我正在尝试创建弹出窗口，react-bootstrap文档提供的弹出窗口示例不起作用。我尝试进行各种调整来解决，但遇到了麻烦。

**The error message I receive is:**

 Line 9:  Parsing error: Unexpected token

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

{{1}}

Answer 1

实际上，您混合使用了类组件和功能组件，

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

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的问题

1 个答案: