javascript - Popper.js React包装器-React.createElement:类型无效

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

那就是我得到的错误：


  index.js：2177警告：React.createElement：类型无效-
  预期的字符串（用于内置组件）或类/函数（用于
  复合组件），但得到：未定义。您可能忘记了出口
  您的组件来自定义它的文件，或者您可能已经混合了
  并默认导入并命名导入。
  
  在StandaloneExample.js：36中检查代码。


和：


  未被捕获的TypeError：Object（...）（...）不是一个函数
      在InnerPopper.render（Popper.js：159）


和：


  上面的错误发生在组件中：
      在InnerPopper中（由Context.Consumer创建）
      在Popper中（在StandaloneExample.js：34）


以及其中的多个：


  TypeError：Object（...）（...）不是一个函数


这是我的代码：

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 />

最佳答案

您链接的示例适用于[email protected]。

请检查您是否没有版本1或更高版本。

react-popper V1与V0相比有重大变化。

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

关于javascript - Popper.js React包装器-React.createElement:类型无效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55399301/