Переопределение метода реактивного компонента

Question

Я использую библиотеку. Эта библиотека создает компонент React, назовем его LibraryComponent.

Я хочу изменить функциональность одного из этих компонентов, в частности handleDrag().

Я создаю мой ExtendedLibrary модуля со следующим кодом:

var LibraryComponent = require('libraryComponent'); 

LibraryComponent.prototype.handleDrag = function() { 
    console.log("I'm the NEW handleDrag method."); 
} 
LibraryComponent.prototype.render = function() { 
    console.log("I'm the NEW render method."); 
} 
module.exports = LibraryComponent; 

Как я понимаю изменение прототипа объекта создателя должен изменить все его экземпляры __proto__ atribute.

в мой установленный LibraryComponent, если я доступ:

this.__proto__.handleDrag() //I'm the NEW handleDrag method. 
this.handleDrag() //I'm the OLD handleDrag method. 

Почему?

В отличие:

this.prototype.render() //I'm the NEW render method. 
this.render() //I'm the NEW render method. (Accessing the __proto__ method too). 

Как я могу сделать, чтобы переопределить handleDrag определенно?

Я tryied с class ExtendedLibrary extends LibraryComponent {...} тоже и проблема та же (но я предпочитаю не включать ES6 вообще в моем проекте.)

Answer 1

Если вы не можете/не хотите использовать ES6 один подход заключается в использовании состав. Просто оберните LibraryComponent своим собственным компонентом и используйте ref для доступа/переопределения специального метода.

var Wrapper = React.createClass({ 
    libLoaded: function(libComponent) { 
    if (libComponent) { 
     libComponent.onDrag = this.onDrag; 
    } 
    }, 
    onDrag: function() { 
    return "Hello drag"; 
    }, 
    render: function() { 
    return <LibraryComponent ref={this.libLoaded}/>; 
    } 
}); 
ReactDOM.render(
    <Wrapper/>, 
    document.getElementById('container') 
); 

https://jsfiddle.net/2n0x666d/3/