Question

在阅读关于React的教程时，我注意到以下代码。

componentDidMount () {
ref.on('value', function (snapshot) {
  this.setState(function () {
    return {
      friends: snapshot.val()
    }
  })
}.bind(this)
}

＆＃39; ref.on＆＃39;方法来自哪里？这是React的一部分，还是一个JavaScript函数？我无法在https://facebook.github.io/react/docs/react-api.html或https://developer.mozilla.org/en-US/docs/Web/JavaScript找到它。此外，还有＆＃39; ref.off＆＃39;在React组件的另一个地方。

componentWillUnmount () {
  ref.off()
}

编辑：

知道它可能是伪代码很有帮助。它来自这门课程https://learn.tylermcginnis.com/courses/50507/lectures/762618。但你必须登录才能查看它。它在React生命周期事件部分。

我在询问＆＃39; .on＆＃39;和＆＃39; .off＆＃39;零件，而不是＆＃39; ref＆＃39;。

Answer 1

ref是对已安装组件的引用。使用ref，您将能够访问已安装组件的类方法。

class Foo extends Component {

    render() {
        return <span onClick={this.onDivClick}>hi</span>
    }

    onSpanClick = () => {
       // do something
    }
}

class Bar extends Component {

    render() {
        return <div onClick={this.onDivClick}>
                  <Foo ref={c => this.ref = c}/>
               </div>
    }

    onDivClick = () => {
       this.ref.onSpanClick() // reference to the mounted Foo instance and call the method onSpanClick
    }
}

Answer 2

看起来像jQuery的添加和删除事件侦听器的方法。可能只是以它为例。

ref.on，ref.off with React

2 个答案: