Popper.js React Wrapper - React.createElement：type無效

Question

我試圖從這里實現獨立的例子 ，使用react-popper - 我基本上只是復制粘貼代碼。 它確實渲染組件。 但是，當我點擊一切休息時。 我在Gatsby.js中使用它 - 如果這應該有所作為？

那是我得到的錯誤：

index.js：2177警告：React.createElement：type無效 - 期望一個字符串（對於內置組件）或類/函數（對於復合組件）但得到：undefined。 您可能忘記從其定義的文件中導出組件，或者您可能混淆了默認導入和命名導入。

在StandaloneExample.js檢查您的代碼：36。

和：

未捕獲的TypeError：Object（...）（...）不是InnerPopper.render中的函數（Popper.js：159）

和：

組件中出現上述錯誤：在Popper中的InnerPopper（由Context.Consumer創建）中（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 />

Answer 1

您鏈接的示例是react-popper@0.x 。

請檢查您是否使用版本1或更高版本。

react-popper V1從V0突破了變化。

你可以找到V1 DOC 這里和V0文檔在這里 。