React: ES6 구문에서 bind와 함께 사용되는 이벤트 리스너를 제거 하시겠습니까?

postMessage API를 사용하여 iframe과 통신하려고하는데 ES6의 eventListeners 관리에 문제가 있습니다.

문서에 명시되어 있습니다.

React를 사용하면 모든 메서드가 자동으로 구성 요소 인스턴스에 바인딩됩니다 (ES6 클래스 구문을 사용하는 경우 제외).

문제는 this.handler.bind(this) !== this.handler 이므로 이벤트가 끝나면 핸들러에 대한 참조를 유지할 수 없기 때문에 리스너를 제거 할 수 없습니다. 함수를 캡슐화하려고 할 수 있지만 캡슐화 함수에도 바인딩이 필요합니다. 생성자도 슈퍼 할 수 있지만 이것이 좋은 생각인지 확신 할 수 없으며 필요한 인수도 모릅니다. 여기서 중요한 점을 놓치고 있다고 확신합니다.

어떤 도움이라도 대단히 감사하겠습니다!

export default class SomeComponent extends Component {

  handleIframeData(event) {
    // some stuff in there that will need 'this' to be set to the component's context, to get props for example.
  }

  componentDidMount() {
    window.addEventListener('message', this.handleIframeData.bind(this), false)
  }

  componentWillUnmount() {
    // won't work because 'this.handleIframeData.bind(this) !== this.handleIframeData'
    window.removeEventListener('message', this.handleIframeData, false)
  }

  render() {
    return (
      <div className="SomeComponent" style={{height: '100%', width:'100%', display: 'table'}}>
        <iframe src="assets/iframe/index.html" style={{display: 'table-row', width: '100%', height:'100%', border: 0}}></iframe>
      </div>
    )
  }
}

어쨌든 감사합니다!