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__属性。

进入我安装的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 {...}并且问题是一样的（但我不想在我的项目中包含ES6。）

Answer 1

如果你不能/不想使用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/

覆盖React组件方法

1 个答案: