es6调用扩展组件功能

Question

Ok so what I'm trying to do is :

I'm extending react-photo-gallery component and it has this openLightbox function, and I want to do something else in my component when that function is triggered, I tried something like this:

import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import Gallery from 'react-photo-gallery';

export class GaleryComponent extends Gallery {

  constructor(props) {
      super(props);
      this.openLightBox = this.openLightBox.bind(this);

  }
  openLightbox() {
    console.log("LIGHTBOX OPENED");
  }
}

What's the proper way to do this?

Answer 1

import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import Gallery from 'react-photo-gallery';

export class GaleryComponent extends Gallery {

  constructor(props) {
    // No need to set this.openLightbox, it will be available from the prototype chain
    super(props);
  }

  // If you want to override openLightbox, you can use super and add your own code
  openLightbox() {
    super.openLightbox();
    console.log("LIGHTBOX OPENED");
  }


  // Had you not overridden it, you would be accessing the super's openLightbox
  componentDidMount() {
      this.openLightbox();
  }
}