[英]Popper.js React Wrapper - React.createElement: type is invalid
I am trying to implement the standalone example from here , using react-popper
- I basically just copy pasted the code for now. 我试图从这里实现独立的例子 ,使用react-popper
- 我基本上只是复制粘贴代码。 It does render the component. 它确实渲染组件。 However, when I click everything breaks. 但是,当我点击一切休息时。 I am using it in Gatsby.js - if that should make a difference? 我在Gatsby.js中使用它 - 如果这应该有所作为?
That's the error(s) I'm getting: 那是我得到的错误:
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. index.js:2177警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到: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. 在StandaloneExample.js检查您的代码:36。
And: 和:
Uncaught TypeError: Object(...)(...) is not a function at InnerPopper.render (Popper.js:159) 未捕获的TypeError:Object(...)(...)不是InnerPopper.render中的函数(Popper.js:159)
And: 和:
The above error occurred in the component: in InnerPopper (created by Context.Consumer) in Popper (at StandaloneExample.js:34) 组件中出现上述错误:在Popper中的InnerPopper(由Context.Consumer创建)中(StandaloneExample.js:34)
And multiple of these: 其中有多个:
TypeError: Object(...)(...) is not a function TypeError:Object(...)(...)不是函数
Here's my code: 这是我的代码:
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
I've modified things a bit (the way I implement state etc.), because I thought this might fix the errors I'm getting, but it didn't. 我已经修改了一些东西(我实现状态等的方式),因为我认为这可能会修复我得到的错误,但事实并非如此。 Apart from that the code is pretty much the same as in the sandbox example - I'm not sure where it breaks. 除此之外,代码与沙盒示例中的代码几乎相同 - 我不确定它在哪里中断。
edit: I am importing things like so: 编辑:我正在导入这样的东西:
import StandaloneExample from './MenuDropdown/StandaloneExample.js'
and am using it in my render function like so: 并在我的渲染函数中使用它,如下所示:
<StandaloneExample />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.