时间戳

首页 > 解决方案 > react-bootstrap 弹出框的问题

reactjs - react-bootstrap 弹出框的问题

问题描述

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

标签： reactjspopoverreact-bootstrap

解决方案

实际上你有混合类组件和功能组件，

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

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

推荐阅读