覆蓋React組件方法

我正在使用庫。這個庫創建一個React Component，我們稱它爲LibraryComponent。覆蓋React組件方法

我想修改其中一個組件方法的功能，特別是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__屬性附加傷害。

進入我的安裝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都在我的項目。）

來源

2016-05-03 DavidDev

如何'LibraryComponent'定義？它可能會將該方法複製到實例（例如，由'React.createClass（）'執行的自動綁定）。 – JMM

如果您打算使用ES6語法，您可以簡單地使用一個類來擴展LibraryComponent。這應該工作。 –

如果你不能/不想使用ES6一個方法是使用組成。只需用自己的Component包裝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/

來源

2016-05-03 15:32:58

覆蓋React組件方法

回答

相關問題