Question

例如，我需要通过'this'获取Component对象，但是'this'是未定义的

成分：

 <Menu onClick ={()=>this.MenuNavigate()}/>

protoTypeFunction：

React.Component.prototype.MenuNavigate = (e) => {
    // let url = e.item.props["data-url"]
    console.log(this)->undefined
}

如何获得'这个'？

我认为所有组件都扩展了React.Component，所以我想在所有组件中使用扩展React.Component的函数，因为我不需要再次使用

Answer 1

如果你试图扩展React.Component，我不建议搞乱React.Component类，我会像这样创建自己的基类：

class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.MenuNavigate = this.MenuNavigate.bind(this);
  }

  MenuNavigate(e) {
    console.log(this);
  }
}

然后像这样使用它：

class Demo extends BaseComponent {
  render() {
    return <Menu onClick={this.MenuNavigate} />;
  }
}

Answer 2

this未定义，因为您使用了具有词法范围this的箭头函数，即它被绑定到定义它的上下文，而不是它被调用的对象。

使用函数表达式解决了这个问题：

React.Component.prototype.MenuNavigate = function(e){
    console.log(this);
}

https://jsfiddle.net/69z2wepo/70670/

但我不会走这条路。 @Canastro在另一个答案中建议的是一种好的方法，另一种方法可能是高阶组件，它可以包裹你的组件并提供MenuNavigat功能。

Answer 3

箭头函数没有 this。您应该使用传统的 function() {...}。但即便如此，我也不建议弄乱 React.component 类或任何其他第 3 部分或外部类/对象。

如何在React.component中的Prototype函数中获取它

3 个答案: