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