reactjs - 在 React ComponentDidMount 中获取引用和附加事件监听器的正确方法？

Question

代码片段中的注释大致概括了问题。当我在 constructor 中绑定(bind) this._setSize 时，它永远不会知道 this.container — 即使在 componentDidMount 中调用时也是如此。我究竟做错了什么？谢谢!

export default class MyComponent extends React.Component {
  constructor () {
    super()
    this._setSize = this._setSize.bind(this)
  }

  componentDidMount () {
    const container = this.container // <div></div> :)
    this._setSize()
    window.addEventListener('resize', this._setSize)
  }

  componentWillUnmount () {
    window.addEventListener('resize', this._setSize)
  } 

  _setSize () {
    const container = this.container // undefined :(
    const containerSize = {
      x: container.offsetWidth,
      y: container.offsetHeight
    }
    this.setState({ containerSize })
  }

  render () {
    return (
      <div ref={node => this.container = node}>
      </div>
    )
  }
}

Answer 1

在每次重新渲染中，您都会创建新的函数实例并将其传递给设置容器引用。然后使用 null 调用前一个函数。因此，您可能会意外地将 this.container 设置为 null:

<div ref={node => this.container = node}>

当您在此处传递组件实例方法而不是内联函数时，它会在组件卸载期间使用引用调用一次，并使用 null 调用第二次。例如:

// dont forget to bind it in constructor
onContainerRef (node) {
  // furthermore you can even check if node is not null
  // if (node) { ...
  this.container = node
} 

// ... in render
<div ref={this.onContainerRef}>

您可以在 docs 中阅读更多内容.