Popper.js React Wrapper - React.createElement: тип недействителен
Я пытаюсь реализовать автономный пример отсюда, используя react-popper - Я сейчас просто скопировал и вставил код. Это делает компонент. Однако при нажатии все ломается. Я использую это в Gatsby.js - если это должно иметь значение?
Вот ошибки, которые я получаю:
index.js: 2177 Предупреждение: React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами.
Проверьте свой код на StandaloneExample.js:36.
А также:
Uncaught TypeError: Object (...) (...) не является функцией в InnerPopper.render (Popper.js:159)
А также:
Вышеупомянутая ошибка произошла в компоненте: в InnerPopper (создан Context.Consumer) в Popper (в 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 />