反応成分を無効にする方法

Question

私はライブラリを使用しています。このライブラリはReactコンポーネントを作成し、それをLibraryComponentと呼ぶことにします。

このコンポーネントメソッドの1つ、特にhandleDrag（）の機能を変更したいと考えています。

だから私は、次のコードで私のExtendedLibraryモジュールを作成します。私は、クリエータオブジェクトのプロトタイプを変更すると、そのすべてのインスタンスに__proto__ atributeを変更する必要があります理解したよう

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; 

。私のマウント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をオーバーライドすることができますか？私もclass ExtendedLibrary extends LibraryComponent {...}でtryied、問題は同じである（しかし、私は私のプロジェクトでは全くES6を含まないことを好む。）

Answer 1

あなたが/ ES6一つのアプローチを使用しないことができない場合

が使用することです組成。 LibraryComponentを独自のComponentでラップし、refを使用して特別なメソッドにアクセス/オーバーライドします。 `LibraryComponent`が定義されているどのように

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/