Popper.js React Wrapper - React.createElement: 类型无效
Popper.js React Wrapper - React.createElement: type is invalid
我正在尝试使用 react-popper
实现 standalone example from here - 我现在基本上只是复制粘贴代码。它确实渲染了组件。但是,当我单击时,一切都会中断。我在 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 />
我正在尝试使用 react-popper
实现 standalone example from here - 我现在基本上只是复制粘贴代码。它确实渲染了组件。但是,当我单击时,一切都会中断。我在 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 />