1

我正在尝试从这里实现独立示例，使用react-popper- 我现在基本上只是复制粘贴的代码。它确实渲染了组件。但是，当我单击时，一切都会中断。我在 Gatsby.js 中使用它——如果这会有所作为？

这就是我得到的错误：

index.js:2177 警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

在 StandaloneExample.js:36 检查您的代码。

和：

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

和：

上述错误发生在组件中：in InnerPopper (created by Context.Consumer) in Popper (at 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 />
4

1 回答 1

3

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

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

react-popperV1 与 V0 相比发生了重大变化。

您可以在此处找到 V1 文档，并在此处找到V0 文档。

于 2019-03-28T16:16:49.330 回答