Question

所以我是新来的人，我想使用样板，但是在chrome控制台中出现以下错误。抱歉，如果这是一个重复的问题，但是我尝试用Google搜索它，却一无所获。感谢您的提前帮助。

（控制台）

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

建议使用组件状态来处理模态，而refs通常用于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>
)
}

让我知道此问题是否仍然存在。很高兴提供帮助

反应：TypeError：this._modal。$ el.on不是一个函数

1 个答案: