ES6调用扩展组件功能

Question

好了，所以我想要做的是：

我延长反应，照片画廊成分，它有这个功能openLightbox，我想做些别的事情在我的组件当这个功能被触发时，我尝试了这样的事情：

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"); 
    } 
} 

这样做的正确方法是什么？

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(); 
    } 
}