javascript - Popper.js react 包装器 - React.createElement : type is invalid

Question

我正在尝试实现 standalone example from here ，使用 react-popper - 我现在基本上只是复制粘贴代码。它确实渲染了组件。但是，当我单击时，一切都会中断。我在 Gatsby.js 中使用它——这是否会有所作为？

这是我遇到的错误:

index.js:2177 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.

Check your code at StandaloneExample.js:36.

和:

Uncaught TypeError: Object(...)(...) is not a function at InnerPopper.render (Popper.js:159)

和:

The above error occurred in the component: in InnerPopper (created by Context.Consumer) in Popper (at StandaloneExample.js:34)

还有其中的多个:

TypeError: Object(...)(...) is not a function

这是我的代码:

import React, { PureComponent } from 'react'
import { Popper, Arrow } from 'react-popper'
import './popper.css'

class StandaloneExample extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    }
  }


  handleClick = (e) => {
    console.log(e);
    this.setState({
      isOpen: !this.state.isOpen,
    })
  }

  render() {
    return (
      <div>
        <h2>Standalone Popper Example</h2>
        <div
          ref={div => (this.target = div)}
          style={{ width: 120, height: 120, background: '#b4da55' }}
          onClick={this.handleClick}
        >
          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
        </div>
        {this.state.isOpen && (
          <Popper className="popper" target={this.target}>
            Popper Content for Standalone example
            <Arrow className="popper__arrow" />
          </Popper>
        )}
      </div>
    )
  }
}

export default StandaloneExample

我做了一些修改(我实现状态的方式等)，因为我认为这可能会修复我遇到的错误，但事实并非如此。除此之外，代码与沙盒示例中的代码几乎相同 - 我不确定它在哪里中断。

编辑:我正在导入这样的东西:

import StandaloneExample from './MenuDropdown/StandaloneExample.js'

并在我的渲染函数中使用它，如下所示:

<StandaloneExample />

Answer 1

您链接的示例适用于 react-popper@0.x。

请检查您使用的不是版本 1 或更高版本。

react-popper V1 对 V0 进行了重大更改。

您可以找到 V1 文档 here和 V0 文档 here .