React: TypeError: this._modal. $ El.on не является функцией

Question

Так что я новичок, чтобы реагировать, и я пытаюсь использовать шаблон, но я получаю следующую ошибку в консоли Chrome. Извините, если это повторный вопрос, но я попытался найти его и ничего не нашел. Заранее спасибо за помощь.

(консоль)

TypeError: this._modal.$el.on is not a function

(index.js)

import React from 'react'
import UIkit from 'uikit'

export default class Modal extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this._modal = UIkit.modal(this.refs.modal, {
      container: false,
      center: true
      // stack: true
    })

    console.log(this._modal)

    this._modal.$el.on('hide', () => {
      this.props.onHide()
    })


    this._modal._callReady()

    if(this.props.visible) {
      this._modal.show()
    }
  }

  componentWillReceiveProps(nextProps) {
    const { visible } = nextProps
    if(this.props.visible !== visible) {
      if(visible) {
        this._modal.show()
      } else {
        this._modal.hide()
      }
    }
  }

  render() {
    return (
      <div ref="modal">
        {this.props.children}
      </div>
    )
  }
}

Answer 1

Рекомендуется обрабатывать ваш мод с вашим состоянием компонента, а ссылки обычно используются для манипулирования DOM. Что вы можете сделать, это инициализировать ваше состояние:

 constructor(props) {
  super(props)
    this.state= {
      isOpen : false
  }
 }

в вашем componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
const { visible } = nextProps
if(this.props.visible !== visible) {
  this.setState({
   isOpen: visible
  })
}

}

и в вашем методе рендеринга:

render() {
return (
  <div ref="modal">
    {this.state.isOpen && this.props.children}
  </div>
)
}

Дайте мне знать, если эта проблема все еще сохраняется. Рад помочь