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;

和控制台错误即时消息接收：

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.

codesandbox：CodeSandbox

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>
    );

React React-Bootstrap弹出窗口

1 个答案: