react-bootstrap 弹出框的问题答案

【问题标题】：Issue with react-bootstrap popoverreact-bootstrap 弹出框的问题
【发布时间】：2019-08-14 11:44:45
【问题描述】：

我正在尝试创建一个弹出框，但 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 = () => (
     |       ^

【问题讨论】：

标签： reactjs popover react-bootstrap

【解决方案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 是您的实际组件，现在您可以将其导出，并在任何您想要的地方使用。

【讨论】：