Popper.js React包装器- React.createElement: type无效

Question

我正在尝试实现从这里独立的例子，使用react-popper --我现在基本上只是复制粘贴了代码。它确实呈现了组件。但是，当我单击时，一切都会中断。我正在Gatsby.js中使用它--如果这会产生影响的话？

这就是我遇到的错误：

index.js:2177警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查您在StandaloneExample.js:36的代码。

和：

无名TypeError: Object(.)(.)不是InnerPopper.render的函数(Popper.js:159)

和：

以上错误发生在Popper (at InnerPopper )中的组件: in InnerPopper(由Context.Consumer创建)中

以及其中的多项：

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

Answer 1

您链接的示例是针对react-popper@0.x的。

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

react-popper V1与V0的关系发生了重大变化。

您可以找到V1 doc 这里和V0 doc 这里。