Popper.js React Wrapper - React.createElement: тип недействителен - PullRequest
Новая
       31

Popper.js React Wrapper - React.createElement: тип недействителен

1 голос
/ 28 марта 2019

Я пытаюсь реализовать автономный пример отсюда , используя react-popper - сейчас я просто скопировал и вставил код.Это делает компонент.Однако при нажатии все ломается.Я использую его в Gatsby.js - если это должно иметь значение?

Вот ошибки, которые я получаю:

index.js: 2177 Предупреждение: реагировать.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте код на StandaloneExample.js: 36.

И:

Uncaught TypeError: Object (...) (...) не является функцией в InnerPopper.render (Popper.js: 159)

И:

Вышеупомянутая ошибка произошла в компоненте: в InnerPopper (создан Context.Consumer) в Popper (в StandaloneExample.js: 34)

И несколько из них:

Ошибка типа: объект (...) (...) не является функцией

Вот мой код: 

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Я немного изменил вещи (способ реализации состояния и т. д.), потому что я думал, что это может исправить ошибки, которые я получаю, но это не так.Кроме того, код почти такой же, как в примере с песочницей - я не уверен, где он ломается.

edit: я импортирую такие вещи: 

import StandaloneExample from './MenuDropdown/StandaloneExample.js'

иЯ использую его в моей функции рендеринга следующим образом: 

<StandaloneExample />

1 Ответ

3 голосов
/ 28 марта 2019

Приведенный вами пример относится к react-popper@0.x.

Пожалуйста, убедитесь, что у вас нет версии 1 или выше.

react-popper В V1 произошли критические изменения по сравнению с V0.

Вы можете найти документ V1 здесь и документ V0 здесь .

...